Как взять объекты из JSON и использовать их на моем сайте?

Question

Я написал код для использования JSON от AJAX.И это работает не так, как я хочу - у меня на сайте есть кое-что неопределенное.

Я попробовал это:

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 (я хотел сначала img из массива галереи из JSON) и с name = undefinend (я хотел имя из объекта из JSON)

я ожидаю поставить всеэлементы из JSON (не одного) в div на моем сайте - с именем (из JSON) и первым img из массива элементов с именем gallery (из JSON) также как src для моего img.

Answer 1

Нет смысла делать 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>

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

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