JSON에서 데이터 읽기 및 html로 표시

Question

외부 JSON 파일의 데이터를 읽고 표시하고 HTML을 사용하여 표시하려고합니다.

내가 지금까지 가지고 :

자바 스크립트 :

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>'; 
}