json data verwerken in een webpagina met fetch

[beach_a]

Beste Forum

Hardware: ESP als Webserver

Ik heb een embedded toepassing waarbij ik bepaalde variabelen wil kunnen wijzigen. De variabelen heb ik opgeslagen in een settings.json file. Seze stuur ik op verzoek vd pagina naar de pagina zodat ik de waardes van deze variabelen in de webpage kan plaatsen en evt wijzigen.

Ik heb een werkende versie, echter hierbij is de json string die ik stuur nogal redundant:

[{"name":"WM_Total","value":415603},{"name":"currenttimesec","value":"00:30:42"},{"name":"startRef","value":" 1 Aug 2025 02:18"},{"name":"WM_Used","value":0}]

Want telkens staat er 'name' en 'value', en het is wel duidelijk dat het om een name/value gaat steeds,

Liever heb ik dus een json die de variable weergeeft en dan de waarde:

{"WM_Total":415603, "currenttimesec", "00:30:42", ....}


Ik heb wat voorbeelden bestudeerd echter het gehele 'fetch' gebeuren vraagt nogal een studie van mijn kant en is tamelijk lastig te doorgronden.

Dit is mijn javascript funtie die dus werkt met de "name" --- "value" json:

code:

    const getdata = async() => {
        try {
            const response = await fetch('/get_settings');
            // Check for 2xx status codes.
            if (!response.ok) {
            throw new Error('Error fetching data');
            }

            // Parse the JSON response.
            const json_Indexdata = await response.json();
                    for (const Edata of json_Indexdata) {
                    console.log(Edata.);
                        const element = document.getElementById(Edata.name);
                        if (!element) continue;
                        element.value = Edata.value;
                        console.log(Edata.name);
                        console.log(Edata.value);
                    }

            // Fetch the data again after 21 seconds.
//          setTimeout(getdata, 21000);
        } 
        catch (error) {
            // TODO: Handle errors instead of logging them.
            console.error(error);
        }
    };
    getdata();

Dit script verwacht dus een 'name' en een 'value'.


Is het mogelijk dit simpel te wijzigen? Ik gebruik nu de "name" als id voor de velden waar de variabelen komen getElementbyID()

En PLEASE houd het simpel.
...

[The Eagle]

Nee, dat is ie niet, dat is hoe json werkt: met key value pairs. En arrays, maar die zijn voor jou kennelijk niet van toepassing

[CyBeR]

Mja dat kan wel, maar waarom? Betaal je per verstuurde byte?

[Butz0rs]

Ja dat kan heel simpel, je kunt de name als key gebruiken.

JavaScript:

const data = {
    WM_Total: 415603,
    currenttimesec: "00:30:42",
    startRef: "1 Aug 2025 02:18",
    WM_Used: 0,
 }

for (const [name, value] of Object.entries(data)) {
  console.log(name + '=' + value);
}

[Salandur]

https://developer.mozilla...Global_Objects/JSON/parse

Volgens mij geeft response.json() al de geparste versie terug, dus je zou in je code direct json_Indexdata.WM_Total uit moeten kunnen voeren in je verbeterde structuur.

[ Voor 6% gewijzigd door Salandur op 26-08-2025 10:38 ]

[beach_a]

Tweakers bedankt voor al uw input. De oplossing van Butz0rs lijkt het te doen, ik ga daarmee verder experimenteren.