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



我希望把JSON中的所有项目(不是一个)放到我网站上的div中 - 名字(来自JSON)和第一个img来自items数组的项目(来自JSON)作为src到我的img。

时间:

这是你试图解析的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中的键,而不是gallery item,

将代码更改为


 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是对象中属性的名称的数组,该数组会是字符串,字符串中没有名为galleryname的属性,实际项目在content (按照你的网址,特别是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>`


});



但是,你可能会更好地使用mapjoin


template = content.ShopItems.map(element =>


 `<div class="product-list-container__list-item">


 <img src="${element.gallery}">


 <h4>${element.name}</h4>


 </div>`


).join();



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


let klucze = Object.keys(content)



你要迭代:


content['shopItems']



...