How can I print values of nested objects of JSON string?

Question

I have the following JSON response after an XMLHttpRequest:

{
 "success":true,
 "result":{"1":{"id":"1","question":"What is one + two","answer":"three"},
 "2":{"id":"2","question":"two + four","answer":"six"},
 "3":{"id":"3","question":"one + three","answer":"for"}
 }
}

I want to display all the questions in a bulleted list and all the answers in a bulleted list side-by-side. Right now I have the following (I included this code to add the JSON.parse functionality, should work):

<script type="text/javascript" src="json2.js"></script>
// ...
var response = JSON.parse(xhr.requestText); 
var list = document.getElementById('listQuestions');
for (var i = 0 ; i < response.length; i++){
 list.innerHTML += '<li>' + response[i].question + '</li>'; // I'm certain this is wrong--I also tried the following but it's not what I'm looking for:
// for (var key in response) {
// console.log("Key: "+key+" value: "+response[key]);
// }
}
// ...
</script>

• Arun Ghosh: Can you create a jsfiddle?
• gen_Eric: Your response is an object, not an array. response.length doesn't exist. Also, don't you need to loop over response.result (which is also an object)?
• Iteration: @RocketHazmat So I access the result object inside the response object by doing for (var key in response.result){} then `console.log(response.result[key])?

Answer 1

The result property in your JSON response is an object and not an array. Also, the response variable does not point to the result object but rather the parent, container object so you'll have to access the result object by calling response.result.

var jsonText = '{"success":true,"result":{"1":{"id":"1","question":"What is one + two","answer":"three"},"2":{"id":"2","question":"two + four","answer":"six"},"3":{"id":"3","question":"one + three","answer":"for"}}}';
var response = JSON.parse(jsonText); 
var list = document.getElementById('listQuestions');
var results = Object.keys(response.result);
for (var i = 1 ; i <= results.length; i++) {
 list.innerHTML += '<li>' + response.result[i].question + ' - ' + response.result[i].answer + '</li>';
}

<div id="listQuestions">
</div>

https://jsfiddle.net/djqrt8z9/

Answer 2

Based on your description I wasn't sure if you wanted two lists because you say you wanted a bulleted list of questions and bulleted list of answers.

var response = {
 "success":true,
 "result":{
 "1":{"id":"1","question":"What is one + two","answer":"three"},
 "2":{"id":"2","question":"two + four","answer":"six"},
 "3":{"id":"3","question":"one + three","answer":"for"}
 }
}
var questions = document.getElementById('listQuestions');
var answers = document.getElementById('listAnswers');
var result = response.result
Object.keys(result).forEach(function(key){
 var question = document.createElement('li');
 questions.appendChild(question);
 question.innerHTML = result[key].question;
 
 var answer = document.createElement('li');
 answers.appendChild(answer);
 answer.innerHTML = result[key].answer;
})

<ul id="listQuestions"></ul>
<ul id="listAnswers"></ul>

Answer 3

let response = JSON.parse(xhr.requestText);
let qs = [];
for (let obj of response.result) qs.push("<li>"+obj.question+"<\/li>");
document.getElementById('listQuestions').innerHTML = qs.join('');

The above uses the for ... of construct to loop through the values of an object.