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>

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)? — gen_Eric
– gen_Eric, Commented Jul 22, 2016 at 17:29
@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])? — Iteration
– Iteration, Commented Jul 22, 2016 at 17:36

10100111001 · Accepted Answer · 2016-07-22 17:51:00Z

3

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/

edited Jul 22, 2016 at 17:51

answered Jul 22, 2016 at 17:36

10100111001

1,8321 gold badge11 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Enjayy · Accepted Answer · 2016-07-22 18:00:21Z

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>

Phrogz · Accepted Answer · 2016-07-22 17:41:01Z

0

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.

answered Jul 22, 2016 at 17:41

Phrogz

304k115 gold badges669 silver badges758 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related