Question

我写了一些代码来通过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。 / p>

Answer 1

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();

Answer 2

您正在迭代错误的变量。 Object.keys（）将传递一个带有对象键名称的数组。

let klucze = Object.keys(content)

您要迭代：

content['shopItems']

Answer 3

这是您要解析的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>`
          });
       });

Answer 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);

<div class='product-list-container__list-line'>Click Here</div>

如何从JSON中获取对象，然后将其用于我的网站？

4 个答案: