JSONからデータを読み取り、htmlで表示

Question

外部のJSONファイルからデータを読み込んで表示し、HTMLを使用して表示したいと考えています。

私がこれまで持っている：

Javascriptを：

var xmlhttpRoles = new XMLHttpRequest(); 
var urlRoles = "../portal/getResults.php"; 

xmlhttpRoles.onreadystatechange = function() { 
    if (xmlhttpRoles.readyState == 4 && xmlhttpRoles.status == 200) { 
     var rolesArray = JSON.parse(xmlhttpRoles.responseText); 
     functionRoles(rolesArray); 
    } 
}; 
xmlhttpRoles.open("GET", urlRoles, true); 
xmlhttpRoles.send(); 

function functionRoles(arr) { 
    var out = ""; 
    var i; 
    alert(arr); 
    for(i = 0; i < arr.length; i++) { 
     out += '<p>' + arr.results[i].Title +'</p>'; 
    } 
    document.getElementById("id02").innerHTML = out; 
} 

getResults.phpファイル出力：

{ 

"results": [ 
    { 
     "DocId": 2204, 
     "Title": "Lorem ipsum dolor sit amet, consectetur", 
     "Locations": [ 
      { 
       "State": "New York", 
       "City": "" 
      }, 
      { 
       "State": "New York", 
       "City": "New York City" 
      } 
     ], 
     "Topics": [ 
      3, 
      7, 
      11 
     ], 
     "PublicationYear": "2011", 
     "Organization": "New Yorks Times", 
     "WebLocation": "www.google.com", 
     "Description": "Lorem Ipsum" 
    } 
], 
"TotalMatches": 1 

} 

HTML：私がしようとしている

<div id="id02"></div> 

ティの価値を得るその他の要素が含まれていて、失敗しています。私は何が間違っているのか分かりません。

Answer 1

JSONはオブジェクトであり、オブジェクトには長さプロパティはありません。あなたの条件を変更する必要があると思います：

for(i = 0; i < arr.results.length; i++) { 
    out += '<p>' + arr.results[i].Title +'</p>'; 
}