Accessing json sub data

Question

I am trying to append in a loop some label and radio button into a div where there text value are stored into a json like:

...
},
    "Doc_3":
    {
            "Q1":{
                "desc":"description Q1",
                "radio1":"radio 1 text ",
                "radio2":"radio 2 text",
                ...
            },
            "Q2":{"desc":"description Q2"}
        }
        
}

Until now, i manage to get Q1 and Q2 desc with this following code:

fetch("data.json")
    .then(response => response.json())
    .then(data => {
       for(x in data.Doc_3){
          desc = data.Doc_3[x].desc
          console.log(desc)
       }
})

But i did not manage to get (in a loop) data.Doc_3[x].radio[y] where y would be a variable incrementing by 1 at the end of the loop so i would be able to append radio1, radio2, radio3, ... in my div

Can someone help me to find how i can access those element please

Answer 1

Is this what you were looking for?

 let data = { "Doc_3": { "Q1": { "desc": "description Q1", "radio1": "radio 1 text ", "radio2": "radio 2 text", }, "Q2": { "desc": "description Q2" } } } for (x in data.Doc_3) { desc = data.Doc_3[x].desc let y = 0; while (++y && data.Doc_3[x]['radio' + y]) { console.log(y, data.Doc_3[x]['radio' + y]) } console.log(desc) }

Answer 2

By typing data.Doc_3[x].radio[y] , you expect an Array radio in the Object data.Doc_3[x] .

You can do it this way by changing the way the radio texts are stored. Instead of having 'radio1' , 'radio2' etc., make an Array called radio that contains your radio buttons' texts.

"Q1": {
    "desc": "description Q1",
    "radio": [
        "radio 1 text ",
        "radio 2 text"
        ...
    ]
}

You can then loop through the Array data.Doc_3[x].radio :

const textArray = data.Doc_3[x].radio;

for (text of textArray) {
    console.log(text)
}

---

You can also keep the original JSON structure and increment an index starting at 1.

You can access the radio1 property like this: data.Doc_3[x].radio1 , as well as like this: data.Doc_3[x]['radio1'] . You can concatenate the string 'radio' with the index ( 'radio' + y or `radio${y}` ) to get the property names:

for (x in data.Doc_3){
    const Q = data.Doc_3[x];
    // you do not know the length, so you have to
    // loop through until the text is undefined
    for (let y = 1, text; text = Q[`radio${y}`]; y++) {
        console.log(text)
    }
}

Answer 3

You can initiate a counter variable (in this case, y ) and dynamically compose the key name. You can then loop through the object's properties until it hits an undefined property.

var data = {
  Doc_3: {
    Q1: {
      desc: "description Q1",
      radio1: "radio 1 text ",
      radio2: "radio 2 text"
    },
    Q2: { desc: "description Q2", radio1: "radio 1 text " }
  }
};

for (x in data.Doc_3) {
  desc = data.Doc_3[x].desc;
  console.log(desc);
  let y = 1;
  while(data.Doc_3[x]["radio" + y]) {
    console.log(data.Doc_3[x]["radio" + y]);
    y++;
  }
}