如何解析 JSON 和嵌套函数（Javascript）答案

【问题标题】：How to parse JSON and nest function (Javascript)如何解析 JSON 和嵌套函数（Javascript）
【发布时间】：2021-07-12 15:24:50
【问题描述】：

我想首先感谢所有花时间阅读的人这。我对 Web 开发非常陌生，所以我知道这可能已经解释过了，但是我无法找到或弄清楚我想要完成什么。

我正在为学校开发一个使用 API 的项目。我正在使用暴雪娱乐魔兽世界游戏数据 API。我已经弄清楚如何解析 JSON 数据以显示我喜欢的项目属性，但是我遇到了以下问题：

我必须发出两个单独的获取请求，因为第一个 API 只返回数组中的项目属性，但我还需要显示与每个项目关联的图像。但是，检索图像的请求仅检索由项目 ID 指定的一张图像。因此，我需要为第一个请求的数组中的每个项目调用图像 API。

下面，您可能会看到我正在使用的代码：

let imgArray = [];


function fetchData(y) {

  let urlDataString = 'https://us.api.blizzard.com/data/wow/search/item?namespace=static-us&locale=en_US&name.en_US={searchTerm}&orderby=id&_page=1&str=&access_token=USVn0pwRxjTkED3oJmBbRLsfd1DiShIam1';
  let queryString = urlDataString.replace('{searchTerm}', y);
  
  function fetchMedia(x) {

    let urlMediaString = 'https://us.api.blizzard.com/data/wow/media/item/{wowItemID}?namespace=static-us&locale=en_US&access_token=USVn0pwRxjTkED3oJmBbRLsfd1DiShIam1';
    
    console.log(urlMediaString.replace('{wowItemID}', x));
    
    }

  



  fetch (queryString)
  .then(response => {
            
    if (!response.ok){
        throw Error("ERROR");
    }
    return response.json();
}).then(data => {
  console.log(data.results);  
  const html = data.results.map(user => {
      return `
      <div class="Items">
        
        <p>${user.data.name.en_US}</p>
        <p>Item Level ${user.data.level}</p>
        <d>${user.data.inventory_type.name.en_US}</d>
        <d class="subclass">${user.data.item_subclass.name.en_US}</d>
        <p>Item Class: ${user.data.item_class.name.en_US}</p>
        <p>Item Subclass: ${user.data.item_subclass.name.en_US}</p>
        <p>ID: ${user.data.id}</p>
        <script>
          let getImage = fetchMedia(${user.data.id});
        </script>

      </div>
      `;
  }).join('');
  console.log(html);
  document
  .querySelector('#stats')
  .insertAdjacentHTML('afterbegin', html);
}).catch(error =>{
  console.log(error);
});

}

.Items {
    background-color: #010721;
    max-width: 362.5px;
    padding: 15px;
    color:white;
    border-radius: 7px;
    border: 1px solid #BEBFC1;
    
}

.Item_Icons {

 border-radius: 7px;
 border: 1px solid #BEBFC1;
 
}

.subclass {
    margin-left: 230px;
}

.speed {
    margin-left: 230px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>

    <div id="app"></div>
    

    <div id="stats"></div>

    



</body>

<!-- <script src="ItemMedia.js"></script> -->
<script src="WOWAPI.js"></script>
</html>

当我调用返回项目数组的主 API 时，地图内部的 html 以纯文本形式返回，而不是运行脚本。我该如何解决这个问题？

Screenshot of Console/HTML Output

如果答案很明显，我提前道歉，但我对此很陌生，如果有人能帮助我指出正确的方向，谢谢。

编辑：编辑：我确实尝试使用字符串模板文字来更改以将 ID 传递到图像 url

ex.) <img src="https://us.api.blizzard.com/data/wow/media/item/${user.data.id}?namespace=static-us&locale=en_US&access_token=USVn0pwRxjTkED3oJmBbRLsfd1DiShIam1" />

但我在控制台中遇到了 CORB 错误。

【问题讨论】：

所以你的方法是解决这个问题的一种反形式。许多浏览器不会尊重您只是添加脚本标签。由于脚本是由 JS 引擎处理的，因此并不总是可以按照您的方式将它们添加到 DOM 中让它们运行。
感谢亨利的指导，您能否指出正确的方向以避免使用字符串模板文字产生的 CORB 错误？
进一步检查，5 次提取中只有 1 次出现 CORS 问题。这可能是 API 方面的问题。

标签： javascript html json dom

【解决方案1】：

到目前为止，我无法确定某些 API 调用为何会出现 CORS 错误，但大多数都不会。也就是说，我已经制定了解决此问题的解决方案，并且我认为，我收集了您正在寻找的大部分信息：

function fetchData(searchTerm) {
    fetch(`https://us.api.blizzard.com/data/wow/search/item?namespace=static-us&locale=en_US&name.en_US=${searchTerm}&orderby=id&_page=1&str=&access_token=USVn0pwRxjTkED3oJmBbRLsfd1DiShIam1`)
        .then(response => {
            if (!response.ok) {
                throw Error("ERROR");
            }
            return response.json();
        })
        .then(data => {
            const stats = document.getElementById('stats');

            Promise.all(data.results.map(user => {
                return fetch(`https://us.api.blizzard.com/data/wow/media/item/${user.data.id}?namespace=static-us&locale=en_US&access_token=USVn0pwRxjTkED3oJmBbRLsfd1DiShIam1`,)
                    .then(innerRes => innerRes.json())
                    .then(innerResData => {
                        return {...user, ...innerResData}
                    })
                    .catch(() => {
                        // Catch CORS Error
                        return user
                    })
            }))
                .then(results => {
                    results.forEach((user) => {
                        const div = document.createElement('div');
                        div.className = 'Items';
                        const lines = [
                            `${user.data.name.en_US}`,
                            `Item Level ${user.data.level}`,
                            `${user.data.inventory_type.name.en_US}`,
                            `${user.data.item_subclass.name.en_US}`,
                            `Item Class: ${user.data.item_class.name.en_US}`,
                            `Item Subclass: ${user.data.item_subclass.name.en_US}`,
                            `ID: ${user.data.id}`
                        ];
                        for (let line of lines) {
                            const p = document.createElement('p');
                            p.innerText = line;
                            div.appendChild(p);
                        }

                        if (user.assets) {
                            for (let asset of user.assets) {
                                const i = document.createElement('img');
                                i.src = asset.value;
                                div.appendChild(i);
                            }
                        }
                        stats.appendChild(div);
                    });
                });
        })
        .catch(error => {
            console.error(error);
        });
}

我通过在控制台中进行了测试：

fetchData('honor')

前 100 个结果似乎效果很好。

如果您打算搜索与“荣誉”一样大的结果池，您还必须弄清楚如何导航分页。

有趣的是，前 100 个结果都没有任何 CORS 问题。我不知道 'thunderfury' 查询中的第 5 个结果有什么特别之处，但它似乎是异常而不是常态。

【讨论】：