JSON文字列のネストされたオブジェクトの値を出力するにはどうすればよいですか？

Question

私はXMLHttpRequest後、次のJSONレスポンスを持っている：

{ 
    "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"} 
      } 
} 

私は箇条書きと箇条書きのサイド・バイ・サイドですべての答えにすべての質問を表示したいです。今、私は（私は動作するはずです、JSON.parse機能を追加するには、このcodeを含む）、次います

<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

あなたの説明に基づいて、箇条書きリストと回答の箇条書きリストが必要だったので、2つのリストが必要かどうかはわかりませんでした。

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>