尝试从 JSON 附加获取数据

Question

我很抱歉继续发布看起来相同的请求，但我尝试使用我认为是正确的（？）promise all 函数为我的页面从 URL 数组中提取 JSON 数据并将它们附加到 div 容器，我仍然没有结果。 任何帮助指出我遗漏或做错的地方将不胜感激。 请记住，我是使用 JavaScript 的绝对初学者，因此可能不会隐含地理解人们提到的功能。

//const url = 'https://fategrandorder.fandom.com/api.php?action=query&prop=revisions&titles=Abigail%20Williams&rvprop=content&format=json'
const baseURL = 'https://fategrandorder.fandom.com/api.php';
const servantTitle = ['Artoria_Pendragon', 'Artoria_Pendragon_(Alter)', 'Artoria_Pendragon_(Lily)', 'Nero_Claudius', 'Siegfried', 'Gaius_Julius_Caesar', 'Altera', 'Gilles_de_Rais_(Saber)', "Chevalier_d'Eon", 'Okita_Sōji', 'Fergus_mac_Róich', 'Mordred', 'Nero_Claudius_(Bride)', 'Ryōgi_Shiki_(Saber)', 'Rama, Water_Iri', 'Lancelot_Saber', 'Gawain', 'Bedivere', 'Elizabeth_Báthory_(Brave)', 'Miyamoto_Musashi', 'Arthur_Pendragon_(Prototype)', 'Suzuka_Gozen', 'Frankenstein_(Saber)', 'Yagyū_Munenori', 'Sigurd', 'Medb_(Saber)', 'Diarmuid_Ua_Duibhne', 'Lanling_Wang', 'Beni-enma', 'Lakshmibai', 'Jason', 'Katsushika_Hokusai_(Saber)', 'Astolfo_(Saber)', 'Dioscuri', 'Tomoe_Gozen_(Saber)', 'Saitō_Hajime'];

let url;

for (let title in servantTitle) {
  url = baseURL + '&prop=revisions&titles=' + servantTitle[title] + '&rvprop=content&format=json';
  console.log(url)
}

Promise.all(urls.map(url => fetch(url)))
  .then(resp => Promise.all(resp.map(r => r.json())))
  .then(result => {
    fetch(url)
      .then(response => response.json())
      .then(function(json) {
        console.log(json);
        appendData(json);
      })
      .catch(function(err) {
        console.log('error: ' + err);
      });

    function appendData(json) {
      var mainContainer = document.getElementById("myData");

      //alert(json[0].stars);

      for (var i = 0; i < json.length; i++) {
        var div = document.createElement("div");
        div.innerHTML = 'Name: ' + json[i].aka + /n'Class: ' + json[i].class + /n
        'Attack: ' + json[i].atk + /n'HP: ' + json[i].hp + /n
        'Grail Attack: ' + json[i].gatk + /n"Grail HP: ' + ${json[i].ghp} + /n
        'Stars: ' + json[i].stars + /n'Cost: ' + json[i].cost;
        mainContainer.appendChild(div);
      }
    }

  })

Answer 1

您是否尝试尝试捕获错误以获得可追溯性？

.catch(function(error) {
    console.error(data);
});

以确保您获得数据

Answer 2

好的，让我们直接跳进去。

首先，您试图通过 URL 列表进行映射，但您没有该列表。

Promise.all(urls.map(url => fetch(url)))

urls数组未在您的代码中定义。

我将粘贴一个代码建议，而不是逐点进行。 看看它，如果你看到一些你不明白的东西，可以随意提问;-)

注意：您提供的 API 没有向我返回有效的 JSON，因此我无法验证这是否有效。

不要认为这是最终的解决方案，它应该作为一种心理形象。

const baseURL = 'https://fategrandorder.fandom.com/api.php';
const servantTitles = ['Artoria_Pendragon', 'Artoria_Pendragon_(Alter)', 'Artoria_Pendragon_(Lily)', 'Nero_Claudius', 'Siegfried', 'Gaius_Julius_Caesar', 'Altera', 'Gilles_de_Rais_(Saber)', "Chevalier_d'Eon", 'Okita_Sōji', 'Fergus_mac_Róich', 'Mordred', 'Nero_Claudius_(Bride)', 'Ryōgi_Shiki_(Saber)', 'Rama, Water_Iri', 'Lancelot_Saber', 'Gawain', 'Bedivere', 'Elizabeth_Báthory_(Brave)', 'Miyamoto_Musashi', 'Arthur_Pendragon_(Prototype)', 'Suzuka_Gozen', 'Frankenstein_(Saber)', 'Yagyū_Munenori', 'Sigurd', 'Medb_(Saber)', 'Diarmuid_Ua_Duibhne', 'Lanling_Wang', 'Beni-enma', 'Lakshmibai','Jason', 'Katsushika_Hokusai_(Saber)', 'Astolfo_(Saber)', 'Dioscuri', 'Tomoe_Gozen_(Saber)', 'Saitō_Hajime'];

// Compose list of URL's using the baseURL and each servant from the servantTitles array
const URLs = servantTitles.map(title => `${baseURL}&prop=revisions&titles=${title}&rvprop=content&format=json`);

// Create array of promises returned by the fetch call to each of URL's 
const apiCalls = URLs.map(URL => fetch(URL));

// Wait for all fetch calls to be resolved and return the promisees
Promise.all(apiCalls)

   // and get JSON data from each promise returned by the fetch call
   .then(responses => Promise.all(responses.map(response => response.json())))

   // append data to html element
   .then(data => {
      var mainContainer = document.getElementById("myData");

      data.forEach(servant => {
         // Here you have the servant data and you can append it to your main container as you wish
      });
   });