使用AJAX和JavaScript從API訪問JSON對象

Question

我正在嘗試將AJAX用於一個使用RESTful API構建的簡單項目。 我想從具有人員列表的API中獲取一些數據，並將該列表輸出到HTML頁面上。

我的XHR對象似乎工作正常，因為我使它將字符串記錄到控制台，它只是訪問使我感到困惑的嵌套JSON對象中的數據。 我想遍歷對象並獲取人名並將其作為<li>項目。

這是JSON文件（來自http://api.pmg.org.za/member/ ）：

{
    count: 505,
    results: [
        {
            bio: "",
            pa_link: "/person/xxxxx-xxxxxx/",
            house_id: 3,
            name: "xxxxxxx",
            url: "http://api.pmg.org.za/member/121/",
            house: {
                name_short: "NA",
                id: 3,
                name: "xxxxxxx"
            },
            start_date: "2013-04-09",
            current: true,
            profile_pic_url: "http://xxxxxxxxxxx.jpg",
            party_id: 1,
            pa_url: "http://www.xxxxxxxxx/",
            party: {
                id: 1,
                name: "xxx"
            },
            // more...
        },
        // more...
    ]
}

和我訪問JSON對象的腳本：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>PMG API experimentation</title>
        </head>
        <body>
            <div id="members"></div>

            <script type="text/javascript">
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        //console.log(xhr.responseText);
                        var parlyMembers = JSON.parse(xhr.responseText);

                        var membersHTML = '<ul class="members">';

                        for (var i = 0; i < parlyMembers.length; i++) {
                            membersHTML += '<li>'
                            membersHTML += parlyMembers.results[i].name;
                            membersHTML += '</li>'
                        }
                        membersHTML += '</ul>';
                        document.getElementById('members').innerHTML = membersHTML;
                    };
                };
                xhr.open('GET', 'http://api.pmg.org.za/member/');
                xhr.send();
            </script>
        </body>
    </html>

我有種感覺，我的JSON查詢是錯誤的。 請幫忙。

Answer 1

您都可以從長度parlyMembers在你for -loop，但遍歷parlyMembers.results 。 您需要檢查要迭代的節點的長度。

for (var i = 0; i < parlyMembers.results.length; i++) {
    membersHTML += '<li>'
    membersHTML += parlyMembers.results[i].name;
    membersHTML += '</li>'
}

Answer 2

您的JSON字符串不正確，請在此處驗證並更正。 http://jsonlint.com/

在javascript中訪問json數據。

var javascript_object = JSON.parse(json_string);
console.log(javascript_object);

您可以看到完整的對象，並且可以相應地訪問變量。

謝謝阿米特

使用AJAX和JavaScript從API訪問JSON對象

問題描述

2 個解決方案

解決方案1
2 已采納 2015-04-16 11:43:14

解決方案2
1 2015-04-16 11:49:33

使用AJAX和JavaScript從API訪問JSON對象

問題描述

2 個解決方案

解決方案1 2 已采納 2015-04-16 11:43:14

解決方案2 1 2015-04-16 11:49:33

解決方案1
2 已采納 2015-04-16 11:43:14

解決方案2
1 2015-04-16 11:49:33