Arttur
@Arttur
Приложения на JavaScript

Почему выводится только последний элемент из JSON?

В фотогалерее фотографии при клике подгружаются из JSON и вставляются в текущий поток, но все фотографии получают данные последнего массива. Подставляет во все последующие элементы img-0. Почему?

Ajax и Клик
function jsonGirls(photo) {
	let request = new XMLHttpRequest();
	request.open('post', 'girls.json', true);
	request.send();
	request.onreadystatechange = () => {
		if (request.readyState === 4) {
		if (request.status === 200) {
			let json = JSON.parse(request.responseText);
			json.forEach(function(element) {
				photo.style.backgroundImage = element.img;
			});
		} else {
			alert("Загрузите ещё раз");
		}
	}
};
}
btn.onclick = function () {
	let row = document.createElement('div');
	row.classList = 'row';
	section.appendChild(row);
	for (i = 0; i <= 4; i++) {
		let photo = elemFirst.cloneNode(true);
		json(photo)
		row.insertAdjacentElement("afterBegin", photo)
	}
};

[
  {
    "text": "Hello",
    "img" : "url('images/img-6.jpg')"
  },
  {
    "text": "Hello",
    "img" : "url('images/img-7.jpg')"
  },
  {
    "text": "Hello",
    "img" : "url('images/img-8.jpg')"
  },
  {
    "text": "Hello",
    "img" : "url('images/img-9.jpg')"
  },
  {
    "text": "Hello",
    "img" : "url('images/img-0.jpg')"
  }
]
  • Вопрос задан
  • 113 просмотров
Пригласить эксперта
Ответы на вопрос 1
@choupa
Архитектор (обычный, который строит)
Вот в этом цикле проблема, как мне видится.

json.forEach(function(element) {
        photo.style.backgroundImage = element.img;
      });


Перебираются все элементы массива json, но при этом в дело идёт только один из них: в photo.style.backgroundImage сохраняется лишь последний элемент из перебираемых в цикле. Каждое следующее значение затирает предыдущее, и остаётся в итоге последнее их всех, т.е. "url('images/img-0.jpg')".

Мы не видим в вашем куске кода, что такое photo. Могу предположить, что переменная photo должна быть не одним объектом, а массивом объектов. Иначе цикл, который я привёл выше, лишён всякого смысла.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы