Почему массив дублируется?

Question

Вопрос в заголовке - не могу понять - почему так происходит ...

let parent = document.querySelector(".items");

let units = [{
  "image": "https://im0-tub-kz.yandex.net/i?id=d8f146ffd72ad3ad74aa0a7d30a79e82&n=13&exp=1",
  "name": "iphone 6",
  "price": "$200",
}, {
  "image": "https://www.hardwareluxx.ru/images/cdn01/E39DA3FE88B24CC9AA35003A8035E70B/img/DD33455A05B9440C8C7199EF6EF82995/apple_iphone8_product_red_00002_DD33455A05B9440C8C7199EF6EF82995.jpg",
  "name": "iphone7",
  "price": "$400",
}, {
  "image": "https://apollo-frankfurt.akamaized.net/v1/files/uhjqavbjoxm21-KZ/image;s=644x461",
  "name": "iphone 8",
  "price": "$500",
}, {
  "image": "https://stot64.ru/wp-content/uploads/2019/12/f19bdb6d96b4cbedfbb0018ec0a3a97a.jpg",
  "name": "iphone XS",
  "price": "$2000",
}];

let goo = "";

for (item in units) {
  let block = document.createElement("div");
  goo += `<img src="${units[item].image}" alt="${units[item].name}">`;
  goo += `<h3>${units[item].name}</h3>`;
  goo += `<p>${units[item].price}</p>`;
  block.innerHTML = goo;
  parent.append(block);
}

.items {
  display: flex;
}

img {
  display: block;
  max-width: 100%;
}

<div class="items"></div>

Answer 1

У Вас стоит создание нового div и его добавление в parent в переборе массива.
Простыми словами, у Вас создаются данные для каждого элемента в массиве.
Если точнее, то для каждого элемента Вы добавляете данные в goo через += и каждый раз их сразу добавляли в parent. Вынесите их за пределы for и всё будет работать корректно.

    let parent = document.querySelector(".items");

    let units = [{
        "image": "https://im0-tub-kz.yandex.net/i?id=d8f146ffd72ad3ad74aa0a7d30a79e82&n=13&exp=1",
        "name": "iphone 6",
        "price": "$200",
    }, {
        "image": "https://www.hardwareluxx.ru/images/cdn01/E39DA3FE88B24CC9AA35003A8035E70B/img/DD33455A05B9440C8C7199EF6EF82995/apple_iphone8_product_red_00002_DD33455A05B9440C8C7199EF6EF82995.jpg",
        "name": "iphone7",
        "price": "$400",
    }, {
        "image": "https://apollo-frankfurt.akamaized.net/v1/files/uhjqavbjoxm21-KZ/image;s=644x461",
        "name": "iphone 8",
        "price": "$500",
    }, {
        "image": "https://stot64.ru/wp-content/uploads/2019/12/f19bdb6d96b4cbedfbb0018ec0a3a97a.jpg",
        "name": "iphone XS",
        "price": "$2000",
    }];

    let goo = "";

    let block = document.createElement("div");
    for (let item in units) {
        goo += `<img src="${units[item].image}" alt="${units[item].name}">`;
        goo += `<h3>${units[item].name}</h3>`;
        goo += `<p>${units[item].price}</p>`;
        block.innerHTML = goo;
    }
    parent.append(block);

    .items {
        display: flex;
    }

    img {
        display: block;
        max-width: 100%;
    }

<div class="items"></div>

Или же Вы можете просто внести обнуление goo внутрь for:

    let parent = document.querySelector(".items");

    let units = [{
        "image": "https://im0-tub-kz.yandex.net/i?id=d8f146ffd72ad3ad74aa0a7d30a79e82&n=13&exp=1",
        "name": "iphone 6",
        "price": "$200",
    }, {
        "image": "https://www.hardwareluxx.ru/images/cdn01/E39DA3FE88B24CC9AA35003A8035E70B/img/DD33455A05B9440C8C7199EF6EF82995/apple_iphone8_product_red_00002_DD33455A05B9440C8C7199EF6EF82995.jpg",
        "name": "iphone7",
        "price": "$400",
    }, {
        "image": "https://apollo-frankfurt.akamaized.net/v1/files/uhjqavbjoxm21-KZ/image;s=644x461",
        "name": "iphone 8",
        "price": "$500",
    }, {
        "image": "https://stot64.ru/wp-content/uploads/2019/12/f19bdb6d96b4cbedfbb0018ec0a3a97a.jpg",
        "name": "iphone XS",
        "price": "$2000",
    }];


    for (let item in units) {
        let block = document.createElement("div");
        let goo = "";
        goo += `<img src="${units[item].image}" alt="${units[item].name}">`;
        goo += `<h3>${units[item].name}</h3>`;
        goo += `<p>${units[item].price}</p>`;
        block.innerHTML = goo;
        parent.append(block);
    }

    .items {
        display: flex;
    }

    img {
        display: block;
        max-width: 100%;
    }

<div class="items"></div>

БЛОГ НА HUSL

Почему массив дублируется?

Ответы (1 шт):