如何从 JSON 中获取对象，然后将它们用于我的站点？答案

【问题标题】：How to take objects from JSON, and use them into my site then?如何从 JSON 中获取对象，然后将它们用于我的站点？
【发布时间】：2019-05-20 09:48:42
【问题描述】：

我编写了一些代码来通过 AJAX 使用 JSON。而且它没有按照我想要的方式工作 - 我的网站上有一些未定义的东西。

我试过了：

let productsList = document.querySelector('.product-list-container__list-line');

function getDataAssync() {
    let httpReq = new XMLHttpRequest();
    let template = '';

    httpReq.open('GET', 'https://raw.githubusercontent.com/maksymilianMroz/items-for-ajax/master/items.json');
    httpReq.addEventListener('readystatechange', function () {
        if (this.readyState == 4 && this.status == 200) {
            let content = this.responseText;
            content = JSON.parse(content);
            let klucze = Object.keys(content)
            console.log(content);
            console.log(klucze);

            klucze.forEach(element => {
                template +=
                    `<div class="product-list-container__list-item">
                        <img src="${element.gallery}">
                        <h4>${element.name}</h4>
                    </div>`
            });
            if(template != '') {
                productsList.innerHTML = template;
            }
        }
    });
    httpReq.send();
}

productsList.addEventListener('click', getDataAssync);

但是我的操作的输出是一个 div（我想要 JSON 中的所有对象），src=undefinend（我想要 JSON 中的画廊数组中的第一个 img）和 name=undefinend（我想要 JSON 中的对象中的名称）

我希望将 JSON 中的所有项目（不是单个项目）放入我网站上的 div 中 - 将名称（来自 JSON）和项目数组中的第一个 img 称为画廊（也来自 JSON）作为 src 到我的 img。

【问题讨论】：

JSON 是什么样的？

标签： javascript json ajax xmlhttprequest

【解决方案1】：

这是您要解析的 json

{
    "ShopItems" : [
        {
            "id" : "1",
            "name" : "Item1",
            "description" : "ONE Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
            "price" : "303120$",
            "gallery" : [
                "https://github.com/maksymilianMroz/items-for-ajax/blob/master/img/1.jpg?raw=true", 
                "https://github.com/maksymilianMroz/items-for-ajax/blob/master/img/2.jpg?raw=true", 
                "https://github.com/maksymilianMroz/items-for-ajax/blob/master/img/3.jpg?raw=true"
            ]
        }]

}

let klucze = Object.keys(content) 返回 json 中的键：ShopItems。所以元素是 json 中的键，而不是画廊项目

把你的代码改成

        klucze.forEach(e => {
          images= content[e]
          images.forEach(element=>{
            template +=
                `<div class="product-list-container__list-item">
                    <img src="${element.gallery}">
                    <h4>${element.name}</h4>
                </div>`
          });
       });

【讨论】：

我的错。使用 ${element.gallery[0]}

【解决方案2】：

klucze 是对象中属性的名称数组，它是字符串。字符串没有称为gallery 或name 的属性。实际项目位于 content 中（在您的 URL 之后，特别是 content.ShopItems）。最小的更改是将klucze.forEach 更改为content.ShopItems.forEach：

content.ShopItems.forEach(element => {
    template +=
        `<div class="product-list-container__list-item">
            <img src="${element.gallery}">
            <h4>${element.name}</h4>
        </div>`
});

不过，尽管如此，map 和 join 可能会更好：

template = content.ShopItems.map(element =>
    `<div class="product-list-container__list-item">
        <img src="${element.gallery}">
        <h4>${element.name}</h4>
    </div>`
).join();

【讨论】：

【解决方案3】：

您正在迭代错误的变量。 Object.keys() 将传递一个包含对象键名称的数组。

let klucze = Object.keys(content)

你想迭代：

content['shopItems']

【讨论】：

【解决方案4】：

Object.keys(content) 没有意义。对象内部还有ShopItems 键，它是一个数组。所以你需要迭代这个数组来得到结果。

另外gallery 是一个数组。所以${element.gallery} 不会给出任何结果，除非通过索引。在这个演示中，我通过了 0 索引

let productsList = document.querySelector('.product-list-container__list-line');

function getDataAssync() {
  let httpReq = new XMLHttpRequest();
  let template = '';

  httpReq.open('GET', 'https://raw.githubusercontent.com/maksymilianMroz/items-for-ajax/master/items.json');
  httpReq.addEventListener('readystatechange', function() {
    if (this.readyState == 4 && this.status == 200) {
      let content = this.responseText;
      let klucze = JSON.parse(content);
      klucze.ShopItems.forEach(element => {
        template +=
          `<div class="product-list-container__list-item">
                            <img src="${element.gallery[0]}">
                            <h4>${element.name}</h4>
                        </div>`
      });
      if (template != '') {
        productsList.innerHTML = template;
      }
    }
  });
  httpReq.send();
}

productsList.addEventListener('click', getDataAssync);

&lt;div class='product-list-container__list-line'&gt;Click Here&lt;/div&gt;

【讨论】：