Как вывести массивы в объекте в jQuery или JS?

Question

[Evgeniy]

Добрый день, подскажите пожалуйста как правильно будет написать скрипт?

Есть объект с массивами
В них прописаны url до фото и атрибуты для img
Картинки прописаны разные

for выводит 2 раза картинку и перезаписывает первые параметры...
Почему так?

Нужно сделать так, чтобы в зависимости от кол-ва массивов в объекте, добавлялись изображения в div

https://codepen.io/Zhelezniy/pen/WNoJePE

Comments

[FeST1VaL]

А откуда вашему скрипту знать какой последний IMG добавлен?

Answer 1

[Rsa97]

Конструкция $("img").attr(...) задаёт атрибуты для всех изображений на странице.

$('#photo').append(`<img src="${data[i].url}" width="${data[i].width}" height="${data[i].height}" alt="${data[i].alt}">`);

Comments

[Evgeniy]

Большое спасибо, работает!

Answer 2

[FeST1VaL]

Если не сильно менять ваш код, то примерно так или как написал Rsa97:

const photo = $('#photo');

for (let i = 0; i < data.length; i++) {
  const img = $('<img>');
  photo.append(img); 
  img.attr({ src: data[i].url, width: data[i].width, height: data[i].height, alt: data[i].alt }) 
}

Comments

[Evgeniy]

Большое спасибо, работает!

Answer 3

[Tim]

Можно и так сделать

Comments

[Evgeniy]

Большое спасибо, работает!