Как сделать динамичное извлечение из JSON?

Question

[Nayro TV]

Есть json нужно чтобы из json рендерилось то количество описаний(desc1, desc2) которое указывается в json

[
	{
		"id": 1,
		"title": "Жилет",
		"desc": [
			{
				"desc1": "100% хлопок",
				"desc2": "Рост модели 178 см",
				"desc3": "Размер жилета M",
				"desc4": "Вещь требует особого ухода"
			}
		],
		"img": [
			{
				"img1": "image_01.jpeg",
				"img2": "image_02.jpeg",
				"img3": "image_03.jpeg"
			}
		]
	},
	{
		"id": 2,
		"title": "Жилет",
		"desc": [
			{
				"desc1": "100% хлопок",
				"desc2": "Рост модели 178 см",
				"desc3": "Размер жилета M",
				"desc4": "Вещь требует особого ухода"
			}
		],
		"img": [
			{
				"img1": "image_01.jpeg",
				"img2": "image_02.jpeg",
				"img3": "image_03.jpeg"
			}
		]
	}
]

Сам рендеринг: обратите внимание пж на desc просто нужно динамичное вытаскивание из json в страницу

const productsContainer = document.querySelector('#store__body')

getProducts()

async function getProducts() {
	const response = await fetch('./js/products.json')
	if (response.ok) {
		const productsArray = await response.json()
		// slick('unslick')
		renderProducts(productsArray)
		// slider.init()
	} else {
		alert('Ошибка')
	}
}

function renderProducts(productsArray) {
	productsArray.forEach(function (item) {
		const productHTML = `<div class="store__inner">
		<div class="slider__body">
			<div class="slider">
				<div class="slider__item">
					<img
						data-fancybox="gallery"
						src="img/image_01.jpeg"
						alt=""
					/>
				</div>
				<div class="slider__item">
					<img
						data-fancybox="gallery"
						src="img/image_02.jpeg"
						alt=""
					/>
				</div>
				<div class="slider__item">
					<img
						data-fancybox="gallery"
						src="img/image_03.jpeg"
						alt=""
					/>
				</div>
			</div>
			<div class="slick__thumbs">
				<div class="slider-th__item">
					<img src="img/image_01.jpeg" alt="" />
				</div>
				<div class="slider-th__item">
					<img src="img/image_02.jpeg" alt="" />
				</div>
				<div class="slider-th__item">
					<img src="img/${item.img.img1}" alt="" />
				</div>
			</div>
		</div>

		<div class="store__info">
			<div class="store__title">Жилет</div>
			<div class="store__text">
				<ul>
					<li>${item.desc[0].desc1}</li>
					<li>${item.desc[0].desc2}</li>
					<li>Размер жилета M</li>
					<li>Вещь требует особого ухода</li>
				</ul>
			</div>
		</div>
	</div>`
		productsContainer.insertAdjacentHTML('beforeend', productHTML)
	})
}

Answer 1

[alexalexes]

Перевести в массив объект -> если есть элементы, то ... отмапать элементы с нужным дополнением li -> объединить массив с пустым разделителем.

`<div class="store__text">` + (Object.entries(item.desc[0]).length > 0 ? `<ul>` +Object.entries(item.desc[0]).map((desc_item) => `<li>` + desc_item[1] + `</li>`).join(``) + `</ul>` : ``)
      + `</div>`

Comments

[Nayro TV]

Вот так выводит....

Что делать?(
вот код вставил

<div class="store__text">` +
				(Object.entries(item.desc[0]).length > 0
					? `<ul>` +
						Object.entries(item.desc[0])
							.map(desc_item => `<li>` + desc_item + `</li>`)
							.join(``) +
						`</ul>`
					: ``) +
				`</div>
			</div>

[
	{
		"id": 1,
		"title": "Жилет",
		"desc": [
			{
				"desc1": "100% хлопок",
				"desc2": "Рост модели 178 см",
				"desc3": "Размер жилета M",
				"desc4": "Вещь требует особого ухода"
			}
		],
		"img": [
			{
				"img1": "image_01.jpeg",
				"img2": "image_02.jpeg",
				"img3": "image_03.jpeg"
			}
		]
	}
]

[alexalexes]

Поправил. Второй элемент нужно мапе оборачивать в li, до этого оборачивался весь массив ключ-значение.
`<li>` + desc_item[1] + `</li>`

[Nayro TV]

alexalexes, Спасибо тебе бро!!! Всё работает! Проект скоро сдам... вот только ещё 1 проблема... если сможешь решить буду ваще благодарен!)))
Вот ссыла) https://qna.habr.com/q/1279866
Там проблема со слайдером... он перестаёт работать slick после вывода из json...