从JSON读取数据并以html格式显示

时间:2016-08-26 21:13:28

标签: javascript json xmlhttprequest getjson

我想从外部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>

我一直试图获得标题或任何其他元素的价值并且不成功。我不确定我做错了什么。

1 个答案:

答案 0 :(得分:0)

JSON是一个对象,对象没有length属性。我认为您需要更改for条件:

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