[GELOEST] Übersicht aus json generieren.

[chromo23]

Nachdem mir hier beim letzten Mal so gut geholfen wurde und ich gerade bei einem ähnlichen Thema am Verzweifeln bin, wende ich mich mal wieder an das Forum.

Ich frage json werte ab:

<script onload="setInterval()">
    setInterval(
        async function sensors() {
            response = await fetch("json");
            myJson = await response.json();
            kwRem = myJson.Sensors[2].TaskValues[0].Value;
            document.getElementById("kwRId").innerHTML = kwRem;

        }, 1000);
</script>

Das funktioniert sehr gut.
Nun möchte ich eine Übersicht der vorhandenen Sensoren erstellen:
Hier die Json-Ausgabe:

{
    "Sensors":[
    {
    "TaskName":"Display",
    "TaskNumber":1
    },

    {
    "TaskValues": [
    {"ValueNumber":1,
    "Name":"Counter",
    "Value":0
    }],
    "TaskName":"Rotary",
    "TaskNumber":2
    },

    {
    "TaskValues": [
    {"ValueNumber":1,
    "Name":"Temperature",
    "Value":20.7
    },
    {"ValueNumber":2,
    "Name":"Humidity",
    "Value":55
    },
    {"ValueNumber":3,
    "Name":"Pressure",
    "Value":1001.98
    }],
    "TaskName":"sensor",
    "TaskNumber":3
    },
],
}

Uns so sollte es dann aussehen:

Display
Rotary	Counter:1
sensor	Temperature: 20.7 Humidity: 55 Pressure: 1001.98

Ich habe zwei Wege probiert, scheitere aber immer daran, dass es Werte in mehr als eine Ebene gibt (TaskValues is ein Array mit x Unterpunkten) und daran, dass es "Sensoren" gibt, die keine TaskValues Eintrag besitzen.

Einer der Versuche bisher:

<script onload="setInterval()">
    setInterval(
        async function () {
        response = await fetch("json");
        myJson = await response.json();
        let htmlS = '';
        myJson.Sensors.forEach(sensor => {
            Object.entries(sensor).forEach(([key, value]) => {
                console.log(`${key} ${value}`);
  
            htmlS += `<a id="${key}">${value}</a>`;
        });
        document.getElementById('sensorsMenu').innerHTML = htmlS;
    });

          
        }, 1000);
</script>

Da zeigt der natürlich alles an was es gibt..
Alles was es an Beispielen zu diesem Thema gibt behandelt leider nicht das Problem eines Arrays bei der Abfrage.

Kann mir jemand helfen? Wichtig ist, dass wenn TaskValues (siehe z.B. Display) nicht vorhanden, dieser Wert leer bleibt
Und wie kann ich auf einfache Weise bestimmte Sensoren nach Namen dabei ausklammern. z.B
pseudocode:

exclude: "Rotary","Display"

Ergebnis:

sensor

Temperature: 20.7 Humidity: 55 Pressure: 1001.98

 

[chromo23]

Vielen Dank schonmal.
Ich hätte vielleicht erwähnen sollen, dass die json liste sehr dynamisch sein kann.
So kann die Art und Anzahl der Sensoren wechseln und die Werte dementsprechend anders sein.
So kann es z.b. einen sensor geben, der co2 heißt und ppm als valuenamen hat.
Ich will im Prinzip alle Sensoren in der Liste erfassen und das übersichtlich ausgeben.
Nur bei Bedarf soll ein Sensor geblacklistet werden. Ich verstehe noch nicht so richtig, wie ich das mit deinem Beispielcode umgesetzt bekomme. Aber ich lese, lerne und probiere...

 

[chromo23]

Das funktioniert zum großen Teil schon.
Zwei Probleme habe ich noch.

Erstens:
Ich habe erstmal im log den Sensornamen hinzugefügt.

console.log(sensor.TaskName + ':' + item.Name + '=' + item.Value);

das sieht dann so aus:

sensor:Temperature=21.3
sensor:Humidity=51
sensor:Pressure=1008.42
Clock:Output=0
Rotary:Counter=0

Was muss ich tun, dass es dann auf der Webseite so angezeigt wird:

sensor: Temperature=21.3
        Humidity=51
        Pressure=1008.42
Clock:  Output=0
Rotary: Counter=0

Zweitens:
Die Blacklist funktioniert für Sensoren mit Werten.
Da Display (ist ja eigentlich kein Sensor) keinen Wert hat, wird es, auch wenn ich es aus der Blacklist entferne, nicht angezeigt. Ich nehme an, es liegt daran, dass, so wie ich sensor.TaskName hinzugefügt habe, jeder Sensor mit einem Wert verknüpft werden möchte?

 

[chromo23]

Yesssssss! Es funktioniert

Was möchtest Du denn bei einem Sensor ohne Werte anzeigen? Nur den Namen? Das kannst Du dann im else-Zweig tun.

else if (!blackList.includes(sensor.TaskName)) {html += '<div>' + sensor.TaskName + '</div>';}

Ausgabe ist immer noch so:

<div>Display</div>
<div>Rotary</div>
<div>Counter =0</div>
<div>sensor</div>
<div>Temperature =20.9</div>
<div></div>
<div>Humidity =54</div>
<div></div>
<div>Pressure =1009.42</div>

Deshalb meine (hoffentlich) letzte Frage: Wie bekomme ich das sortiert?

 

[chromo23]

Sorry. Es ist schon spät. Der Grund warum ich das nicht sortiert bekommen habe war:

else if (!blackList.includes(sensor.TaskName)) {html += '<div>' + sensor.TaskName + '</div>' + '<div></div>';}

Ohne Wert kommt da auch nichts mehr, deshalb muss man manuell noch

'<div></div>'

hinten ran hängen.

Danke dir vielmals!!! Gute Nacht....

 

[chromo23]

Und auch hier wieder ein visuelles Feedback.


So langsam, ganz, ganz langsam komme ich da rein

 

[chromo23]

Ich sehe grad, dass ich dir nie geantwortet habe.
Ja, hab ich mit grid gemacht :)