如何從API中提取和顯示數據？

我試圖從網站下載並顯示API數據。這裏是我目前使用的代碼：如何從API中提取和顯示數據？

 function loadJSON(file, callback) { 

     var xobj = new XMLHttpRequest(); 
     xobj.overrideMimeType("application/json"); 
     xobj.open('GET', file, true); 
     xobj.onreadystatechange = function() { 
      if (xobj.readyState == 4 && xobj.status == "200") { 
       callback(xobj.responseText); 
      } 
     }; 
     xobj.send(null); 
    } 
     var outerSpace; 
     loadJSON("http://api.open-notify.org/astros.json", gotData); 

     function gotData(data) { 
      outerSpace = data; 
     } 

     if (outerSpace) { 
     console.log(outerSpace.people.name); 
     }

這是完整的API（沒有太多）。

{ 
"number": 3, 
"message": "success", 
"people": [ 
{ 
"name": "Peggy Whitson", 
"craft": "ISS" 
}, 
{ 
"name": "Fyodor Yurchikhin", 
"craft": "ISS" 
}, 
{ 
"name": "Jack Fischer", 
"craft": "ISS" 
} 
] 
}

不應該console.log輸出「Peggy Whitson」？我沒有收到錯誤消息，但控制檯沒有收到消息。如果有人能幫我找到解決辦法，我將不勝感激。謝謝！

來源

2017-07-25 matthew kap

第一，刪除if語句，所以你可以看到，如果你有來自服務器的404或500錯誤： [IF（xobj.readyState == 4 && xobj.status == 「200」）{ callback（xobj.responseText）; }] – Abiezer

另外'people'是一個數組，所以你不能直接調用'people.name'。使用'outerSpace.people [0] .name'獲取名字。 –

@Abiezer沒有錯誤信息。 –

我覺得其他的答案都很好，我只是想，我認爲誤解在於指出：

// Here you create the callback. 
    // It will run later when the ajax-call completes. 
    function gotData(data) { 
    outerSpace = data; 
    } 

    // This however runs immediately and only once. 
    // outerSpace will *always* be undefined at this point 
    // Because gotData has not yet completed. 
    // (The whole thing about ajax-calls are that they complete *later*.) 
    if (outerSpace) { 
    console.log(outerSpace.people.name); 
    }

你把if，就好像它可能意味着when（可悲的是沒有這樣的事情）你所擁有的只是你的回調，所以你必須把你的邏輯放在那裏：

function gotData(data) { 
    outerSpace = data; 
    if (outerSpace) { 
     console.log(outerSpace.people.name); 
    } 
    }

來源

2017-07-25 02:39:16 ippi

有兩個問題。你的功能gotData加載數據作爲一個字符串，所以你需要解析字符串轉換成JSON：

function gotData(data) { 
    outerSpace = JSON.parse(data); 
}

其次，人是一個數組，所以如果你只是想抓住的名字之一，你需要指定該對象的索引。

if (outerSpace) { 
    console.log(outerSpace.people[0].name); 
}

來源

2017-07-25 02:24:02 zachdb86

我沒有收到錯誤消息，但仍然沒有控制檯消息。以下是我的代碼：https://codepad.co/snippet/5WJlz3Lh –

您可以在代碼的早期添加日誌記錄。例如，我可能會在測試時在您的gotData函數中添加'console.log（data）'來查看您是否正確檢索了數據。 – zachdb86

如何從API中提取和顯示數據？

回答

相關問題