Marvel API：使用 XMLHttpRequest 獲取數據

Question

這是我第一次使用 Marvel API。 我正在嘗試使用 JavaScript 顯示 id、圖像和一系列字符，但我不知道如何將這些信息輸出到我的 HTML 中。

有什么幫助嗎？

(function() {
  'use strict';

  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://gateway.marvel.com/v1/public/characters?ts=1&apikey=xxx');
  xhr.send();

  console.log('Loading...');
  xhr.addEventListener('load', function() {

    //console.log(xhr.responseText);

    var data = JSON.parse(xhr.responseText);
    var resultsLength = data.data.results;

    for (var i = 0; i < resultsLength.length; i++) {

      console.log(resultsLength[i]);
      console.log(resultsLength[i].id);
      console.log(resultsLength[i].name);
      console.log(resultsLength[i].series);

      var id = resultsLength[i].id;
      var nome = resultsLength[i].name;
      var series = JSON.stringify(resultsLength[i].series);

      var ul = document.querySelector('#comics');
      var li = document.createElement('li');
      ul.appendChild(li);

   }

 });

})();

感謝您的回答@Sil Cia。 根據您的回答，我正在更新我的代碼。 現在我可以在 HTML 中輸出系列信息和其他信息。

 var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://gateway.marvel.com/v1/public/characters?ts=1&apikey=xxx'); xhr.send(); console.log('Loading...'); xhr.addEventListener('load', function() { var data = JSON.parse(xhr.responseText); var resultsLength = data.data.results; for (var i = 0; i < resultsLength.length; i++) { var arr = { id: resultsLength[i].id, nome: resultsLength[i].name, series: resultsLength[i].series } var seriesStr = ''; if (arr.series && arr.series.items) { for (var x = 0; x < arr.series.items.length; x++) { seriesStr += '<a href="#">' + arr.series.items[x].name + '</a>'; } } var ul = document.querySelector('#comics'); var li = document.createElement('li'); var id = document.createElement('span'); var nome = document.createElement('span'); var series = document.createElement('span'); id.innerHTML = arr.id; nome.innerHTML = arr.nome; series.innerHTML = seriesStr; li.appendChild(id); li.appendChild(nome); li.appendChild(series); ul.appendChild(li); } });

 <ul id="comics"></ul>

Answer 1

好的，現在在系列變量中，您有一個如下所示的對象：

{available: 3, collectionURI: " http://gateway.marvel.com/v1/public/characters/1011334/series ", items: Array(3), 返回: 3}

您想要做什么來訪問此對象內的 items 數組，其中包含系列名稱。

所以在你的代碼中：

var series = JSON.stringify(resultsLength[i].series);

你可以修改：

var seriesName = resultsLength[i].series.items[0].name;
//Note: No need for JSON.stringify here

因此，您正在訪問“系列對象”內的“項目數組”中的第一個項目的名稱。

items[0] 中的“0”應該是一個動態值，你很可能會循環遍歷這個 items 數組來顯示所有系列。

像這樣：

var seriesItems = resultsLength[i].series.items;
//I changed the variable name not to confuse it with the "series" object

if (seriesItems.length > 0) {
//Check to make sure this character has some available series!

    for (var j = 0; j < seriesItems.length; j++) {
        var li = document.createElement('li');
        var text = document.createTextNode(seriesItems[j].name);
        li.appendChild(text);
        ul.appendChild(li);
    }
} 
else {
  var text = document.createTextNode('The series are unavailable!');
  ul.appendChild(text);
}

不要忘記更改您的 API 密鑰，因為您已經在線發布了它！