Как распарсить характеристики товара в div блоках и создать из них массив JavaScript?

Question

[Speakea1y1289]

Добрый день. Имеется сайт с товаром, например - https://www.xcom-shop.ru/hp_22-c0015ur_645720.html
Имеется код, который я вставляю в консоли Google Chrome и выполняю на этом сайте:

$('.prop-line').each(function(index, element) {
	if (!$(element).hasClass('prop-line-wide')) {
		var xcom_prop_name = $(element).find('.call').text();
		var xcom_prop_value = $.trim($(element).find('.prop-value').text());
		var xcom_prop_group = $.trim($(element).find('h3').text());
		
		if ($.trim($(element).find('h3').text()) == "") {
			console.log("TITLE_PROP: " + xcom_prop_name, "PROP_VALUE: " + xcom_prop_value);
		} else {
			console.log("GROUP_PROPS: " + xcom_prop_group);
		}
	}
});

При исполнении данного кода. Данные все характеристики товара парсятся и на вывод в консоль идут: GROUP_PROPS - название определённой группы характеристик; TITLE_PROP - название характеристики из группы хар-ик; PROP_VALUE - значение хар-ки.


Задача следующая - завернуть все характеристики в массив со следующей стрктурой:

array(
	[GROUP_PROPS] => array(
		"НАЗВАНИЕ_ГРУППЫ_ХАР-ОК_1" =>
		array(
			[НАЗВАНИЕ_ХАР-КИ_1] => "ЗНАЧЕНИЕ_ХАР-КИ_1",			
			[НАЗВАНИЕ_ХАР-КИ_2] => "ЗНАЧЕНИЕ_ХАР-КИ_2",			
			[НАЗВАНИЕ_ХАР-КИ_3] => "ЗНАЧЕНИЕ_ХАР-КИ_3",			
			...
		),
		"НАЗВАНИЕ_ГРУППЫ_ХАР-ОК_2" =>
		array(
			[НАЗВАНИЕ_ХАР-КИ_1] => "ЗНАЧЕНИЕ_ХАР-КИ_1",			
			[НАЗВАНИЕ_ХАР-КИ_2] => "ЗНАЧЕНИЕ_ХАР-КИ_2",			
			[НАЗВАНИЕ_ХАР-КИ_3] => "ЗНАЧЕНИЕ_ХАР-КИ_3",			
			...
		),
		...
	),
);

НАЗВАНИЕ_ГРУППЫ_ХАР-ОК_* - значение из GROUP_PROPS; НАЗВАНИЕ_ХАР-КИ_* - значение из TITLE_PROP; ЗНАЧЕНИЕ_ХАР-КИ_* - значение из PROP_VALUE;

Как это можно сделать?

Comments

[0xD34F]

А чо так мало тэгов?

[Speakea1y1289]

0xD34F, все теги по делу, в чём дело?

Answer 1

[Speakea1y1289]

Вот решение:

let arr = {};
$('#prop-columns .prop-line.delimiter').each(function () {
    const category = $(this);
    let props = {};
    category.nextUntil('.delimiter').each(function() {
        const item = $(this);
        props[item.find('.call').text()] = item.find('.prop-value').text();
    });
    arr[category.text()] = props;
});
console.log(arr);

Comments

[Snitch]

Задача следующая - завернуть все характеристики в массив

let arr = {};
let props = {};

Самое смешное, что у вас ни одного массива.

Answer 2

[Владислав Поляков]

Создать Map объект, new Map(string, Array). Где ключом будет название группы, а значение - массив объектов {key: value}

Comments

[Speakea1y1289]

Почему не работает:

$('.prop-line').each(function(index, element) {
	if (!$(element).hasClass('prop-line-wide')) {
		var xcom_prop_name = $(element).find('.call').text();
		var xcom_prop_value = $.trim($(element).find('.prop-value').text());
		var xcom_prop_group = $.trim($(element).find('h3').text());
		var arrProps = new Map();
		
		if ($.trim($(element).find('h3').text()) == "") {
			//console.log("TITLE_PROP: " + xcom_prop_name, "PROP_VALUE: " + xcom_prop_value);
			arrProps[xcom_prop_group][xcom_prop_name] = xcom_prop_value;
		} else {
			//console.log("GROUP_PROPS: " + xcom_prop_group);
			arrProps = arrProps[xcom_prop_group];
		}
	}
});

[Евгений Ромашкан]

Speakea1y1289,

Почему не работает:

Потому что кому-то пора включить дебаггер

[Владислав Поляков]

Speakea1y1289, Потому что, нужно правильно использовать Map