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 密钥，因为您已经在线发布了它！