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

我编写了一些代码，通过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);

let productsList=document.querySelector（'.product-list-container__-list-line'）；
函数getDataAsync（）{
设httpReq=new-XMLHttpRequest（）；
让模板=“”；
httpReq.open（'GET'，'https://raw.githubusercontent.com/maksymilianMroz/items-for-ajax/master/items.json');
httpReq.addEventListener（'readystatechange'，函数（）{
if（this.readyState==4&&this.status==200）{
让content=this.responseText；
content=JSON.parse（content）；
设klucze=Object.keys（content）
控制台日志（内容）；
console.log（klucze）；
klucze.forEach（元素=>{
模板+=
`
${element.name}
`
});
如果（模板！=''）{
productsList.innerHTML=模板；
}
}
});
httpReq.send（）；
}
productsList.addEventListener（'click'，getDataAssync）；

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

---

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

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>`
});

---

您正在迭代错误的变量。key（）将提供一个包含对象键名称的数组

let klucze = Object.keys(content)

您要迭代：

content['shopItems']

---

这就是您试图解析的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"
            ]
        }]

}

让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>`
          });
       });

klucze.forEach（e=>{
图像=内容[e]
images.forEach（元素=>{
模板+=
`
${element.name}
`
});
});

执行

对象键（内容）

没有任何意义。还有

ShopItems

键在对象内部，该对象是一个数组。所以你需要迭代这个数组来得到结果

此外，

gallery

是一个数组。因此，

${element.gallery}

将不会给出任何结果，除非传递索引。在这个演示中，我通过了0索引

let productsList=document.querySelector（'.product-list-container__-list-line'）；
函数getDataAsync（）{
设httpReq=new-XMLHttpRequest（）；
让模板=“”；
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）{
让content=this.responseText；
让klucze=JSON.parse（content）；
klucze.ShopItems.forEach（元素=>{
模板+=
`
${element.name}
`
});
如果（模板！=''）{
productsList.innerHTML=模板；
}
}
});
httpReq.send（）；
}
productsList.addEventListener（'click'，getDataAssync）
点击这里
JSON看起来像什么？我的错。使用${element.gallery[0]}
        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>`
          });
       });