Как распечатать значения вложенных объектов строки JSON?

Question

У меня есть следующий ответ JSON верхушкы 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"} 
      } 
} 

Я хочу, чтобы отобразить все вопросы в маркированный список и все ответы в маркированный список бок о бок. Сейчас у меня есть следующий (я включил этот code добавить JSON.parse функциональности, должно работать):

<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> 

Answer 1

Свойство результата в ответ JSON является объектом, а не массив. Кроме того, переменная ответа не указывает на объект результата, а скорее на родительский объект-контейнер, поэтому вам придется получить доступ к объекту результата, вызвав 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

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(''); 

выше использует for ... of конструкцию для перебора значений объекта.

Answer 3

Основываясь на вашем описании, я не был уверен, хотите ли вы двух списков, потому что вы говорите, что хотите получить маркированный список вопросов и маркированный список ответов.

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>