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

我正在嘗試使用AJAX構建使用RESTful API的簡單項目。我想從包含人員列表的API獲取一些數據，並且希望將該列表輸出到HTML頁面。使用AJAX和JavaScript從API訪問JSON對象

我的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的查詢是錯誤的莫名其妙。請幫忙。

來源

2015-04-16 Siya

'parlyMembers'將評估爲'Object'不具有'length'屬性，因此你的循環不會運行。 –

您從parlyMembers中獲得的長度爲for-loop，但是循環利用了parlyMembers.results。您需要檢查您正在迭代的節點的長度。

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

來源

2015-04-16 11:43:14 darthmaim

謝謝你。這真的有幫助。 – Siya

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

訪問javascript中的json數據。

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

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

感謝阿米特

來源

2015-04-16 11:49:33

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

回答

相關問題