Как с помощью fetch при выводе JSON-ответа читать объекты в массиве?

Question

[Сергей Золотарёв]

Доброго времени суток!

Впервые столкнулся с JSON-ответами от бэкенда в формате массива с объектами. DevTools говорит о том, что ответ имеется, но функция fetch не читает его, обрабатывая его куски. Как сделать так, чтобы fetch читал объекты в массиве, обрабатывая их? Заранее вам спасибо!

Пример кода

fetch('/events/api/get', { method: 'POST', body: sq[0] })
		.then(response => response.json())
		.then((data) => {
			console.log(data);
			
			data.map((response) => {
					content = response.location !== '' ? '<span data-type="location">' + response.location + '</span>' : '';
					readyDescription = response.content.matchAll(/<p[^>]*>(([^>]|.)*?)<\/p>/ug);
					content += '<span data-type="description">' + readyDescription[1][0].length > 234 ? mb_strimwidth(readyDescription[1][0], 0, 234, '...') : readyDescription[1][0] + '</span>';
					
					dateFormat = [
						moment(response.date_from, 'd/m/Y'),
						moment(response.date_to, 'd/m/Y')
					];
					
					eventCard = '<span id="date">' + response.date_to ? dateFormat.join(' - ') : dateFormat[0] + '</span><img src="' + response.titleImage + '" alt="' + response.title + '" />';
					eventCard += '<span id="title">' + response.title + '</span><p>{content}</p><a href="/events/' + response.id + '">Show more</a>';
					
					$('.slider').append('<li>' + eventCard + '</li>');
			});
			$('.load-screen-services').addClass('list-smart-close');
		})
		.catch(() => { $('.load-screen-services').addClass('list-smart-close'); });

Пример JSON-ответа от сетевой части из DevTools

[{"id":1,"date_to":null,"location":"Moscow","tematic":"Conferences","type":null,"date_from":"2022-11-10","title":"Full-service real estate. Accents-2022","titleImage":"/images/content/08-04-2022_05:39:24.jpg","content":"<div id=\"matherial\"><p>Any real estate object goes through several life stages, starting from the selection and approval of a plot to ownership and operation, regardless of whether it is residential or commercial real estate.&nbsp;In this process, any owner faces many obstacles, with which he is helped to cope by real estate market experts at each stage.&nbsp;Let&#39;s talk in the format of a round table on this topic with accents and features of 2022.</p>\n\n<p><strong>The following persons are invited to participate::</strong></p>\n\n<p>Design companies, engineering firms, architectural bureaus, developers, builders, finishing companies, owners of residential and commercial real estate, management and service companies, consultants-brokers.</p>\n\n<p>&nbsp;</p></div>\n"}]

Comments

[Виктор Майоров]

А что console.log(data); показывает, массив?
Если да, то ошибка уже в самом блоке перебора массива где-то.
Ну и map тут не нужен, используйте например forEach

[Сергей Золотарёв]

Виктор Майоров, пробовал ранее forEach вместо map и та же песня...

[Сергей Золотарёв]

Виктор Майоров, только что пробовал сделать так:

Обновлённый пример кода

data.forEach((link) => {
				link.map((response) => {
					content = response.location !== '' ? '<span data-type="location">' + response.location + '</span>' : '';
					readyDescription = response.content.matchAll(/<p[^>]*>(([^>]|.)*?)<\/p>/ug);
					content += '<span data-type="description">' + readyDescription[1][0].length > 234 ? mb_strimwidth(readyDescription[1][0], 0, 234, '...') : readyDescription[1][0] + '</span>';
					
					dateFormat = [
						moment(response.date_from, 'd/m/Y'),
						moment(response.date_to, 'd/m/Y')
					];
					
					eventCard = '<span id="date">' + response.date_to ? dateFormat.join(' - ') : dateFormat[0] + '</span><img src="' + response.titleImage + '" alt="' + response.title + '" />';
					eventCard += '<span id="title">' + response.title + '</span><p>{content}</p><a href="/events/' + response.id + '">Show more</a>';
					
					$('.slider').append('<li>' + eventCard + '</li>');
				});
			});

И также не получилось...

[Виктор Майоров]

Сергей Золотарёв, нужно просто forEach, map тут уже не нужен, если в data уже массив лежит.
console.log(data) - посмотрите что выведет и пришлите скрин развернутого элемента.

[Сергей Золотарёв]

Виктор Майоров, пробовал правильный forEach и снова одни и те же проблемы:

fetch('/events/api/get', { method: 'POST', body: sq[0] })
		.then(response => response[index].json())
		.then((data) => {
			console.log(data);
			
			data.forEach((response, index) => {
					content[0] = response[index].location !== '' ? '<span data-type="location">' + response[index].location + '</span>' : '';
					readyDescription[0] = response[index].content.matchAll(/<p[^>]*>(([^>]|.)*?)<\/p>/ug);
					content[0] += '<span data-type="description">' + readyDescription[0][1][0].length > 234 ? mb_strimwidth(readyDescription[0][1][0], 0, 234, '...') : readyDescription[0][1][0] + '</span>';
					
					dateFormat[0] = [
						moment(response[index].date_from, 'd/m/Y'),
						moment(response[index].date_to, 'd/m/Y')
					];
					
					eventCard[0] = '<span id="date">' + response[index].date_to ? dateFormat[0].join(' - ') : dateFormat[0][0] + '</span><img src="' + response[index].titleImage + '" alt="' + response[index].title + '" />';
					eventCard[0] += '<span id="title">' + response[index].title + '</span><p>' + content[0] + '</p><a href="/events/' + response[index].id + '">Show more</a>';
			
					responseHtml[0] += '<li>' + eventCard[0] + '</li>';
			});
			$('#events-body > .events-feed main .slider').html(responseHtml[0]);
			$('.load-screen-services').addClass('list-smart-close');
		})
		.catch(() => { $('.load-screen-services').addClass('list-smart-close'); });

[Сергей Золотарёв]

Сам код, где его кусок - один из проблемных примеров на Pastebin