Как в элемент массива добавить массив новых элементов JavaScript?

Question

[Speakea1y1289]

Добрый день. Имеется такой код:

var arrProps = ["GROUP_PROPS"];
var groups = ["Тест1", "Тест2", "Тест3"];
arrProps.push(groups);

Задача: добавить в массив arrProps, в его элемент ["GROUP_PROPS"] другой массив groups, так чтобы структура массива была следующая:

array(
	[GROUP_PROPS] => array("Тест1", "Тест2", "Тест3"),
);

Как это сделать? Как обратиться к элементу GROUP_PROPS?

Answer 1

[Andrey Suha]

Вам сюда

Comments

[Speakea1y1289]

Хорошо, а как мне через такую конструкцию добавить в элемент массив элементов?

var arrProps = [];
$('.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()) !== "") {
			arrProps["GROUP_PROPS"] = xcom_prop_group;
		}
	}
});
console.log(arrProps);

Я парсю данные с другого сайта и мне надо в arrProps["GROUP_PROPS"] записать массив названий групп характеристик:

Каждое название группы записывается в переменную xcom_prop_group и соответственно при каждой обработке названия нужно его записывать сюда arrProps["GROUP_PROPS"].
Сейчас у меня в этом массиве висит только одно последнее название:

Как это исправить?

[DanKud]

.....
arrProps["GROUP_PROPS"] = [];
if ($.trim($(element).find('h3').text()) !== "") {
    arrProps["GROUP_PROPS"].push(xcom_prop_group);
}
.....

[Andrey Suha]

Speakea1y1289, почитайте ссылку что я Вам дал, в js нету ассоциативных массивов, Вам нужно использовать объект

[Speakea1y1289]

DanKud, тоже об этом сейчас подумал, но мне как, получается, если я захочу добавить в массив arrProps элемент ["GROUP_PROPS"] и объявить его как значение массива, то мне придётся только так писать arrProps["GROUP_PROPS"] = [] ?
Нельзя как-то иначе написать? Вот тут например var arrProps = ["GROUP_PROPS"]; как-то можно показать, как сделать GROUP_PROPS массивом?

[DanKud]

Speakea1y1289,

var arrProps = {
    "GROUP_PROPS": []
};

[Speakea1y1289]

DanKud, Вопрос по-сложнее. Весь код привёл к виду:

var arrProps = {
    "GROUP_PROPS": []
};
$('.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);
			arrProps[xcom_prop_group][xcom_prop_name] = xcom_prop_value;
		} else {
			arrProps["GROUP_PROPS"].push(xcom_prop_group);
		}
	}
});
console.log(arrProps);

Теперь мне надо, чтобы в каждую группу характеристик добавлялись эти характеристики.
Сделал что-то подобное: arrProps[xcom_prop_group][xcom_prop_name] = xcom_prop_value; но это не работает.
Вот сайт, где данный код исполняю: https://www.xcom-shop.ru/hp_22-c0015ur_645720.html

Я хочу, чтобы была следующая структура массива:

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 - значение хар-ки.



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

[Andrey Suha]

Если вы хотите что бы было ключ => значение ставите фигурные скобки если без ключей то квадратные, ПОЧИТАЙТЕ ссылку которую я Вам дал и не будет столько вопросов

[Speakea1y1289]

Andrey Suha, я уже понял, как массив делать такого плана. Есть следующий код:

var arrProps = {
    "GROUP_PROPS": []
};
$('.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 (xcom_prop_group == "") {
			//console.log("GROUP_PROPS " + test, "TITLE_PROP: " + xcom_prop_name, "PROP_VALUE: " + xcom_prop_value);
			//arrProps[xcom_prop_group][xcom_prop_name] = xcom_prop_value;
			console.log(test);
		} else {
			arrProps["GROUP_PROPS"].push(xcom_prop_group);
			var test = xcom_prop_group;
		}
	}
});
console.log(arrProps);

Я не понимаю почему переменная test у меня показывается undefined:

Сайт, где исполняю код: https://www.xcom-shop.ru/hp_22-c0015ur_645720.html
Мне надо, чтобы в переменной test было название группы характеристик.

[Andrey Suha]

Speakea1y1289, Потому что вы сначала выводите в консоль переменную, а потом ее объявляете

var arrProps = {
    "GROUP_PROPS": []
};
$('.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 (xcom_prop_group == "") {
            //console.log("GROUP_PROPS " + test, "TITLE_PROP: " + xcom_prop_name, "PROP_VALUE: " + xcom_prop_value);
            //arrProps[xcom_prop_group][xcom_prop_name] = xcom_prop_value;
            
        } else {
            arrProps["GROUP_PROPS"].push(xcom_prop_group);
            var test = xcom_prop_group;
        }
        console.log(test);
    }
});
console.log(arrProps);

Я бы Вам советовал изучить основы js или отдать задачу фрилансеру.

[hzzzzl]

Я не понимаю почему переменная test у меня показывается undefined:

var arrProps = {
    "GROUP_PROPS": []
};
$('.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 (xcom_prop_group == "") {
      console.log(test);
    } else {
      arrProps["GROUP_PROPS"].push(xcom_prop_group);
      var test = xcom_prop_group;
      // потому что test объявляется здесь и доступен только внутри блока else {}
    }
  }
});
console.log(arrProps);

а так test виден везде

var test = ''
var arrProps = {
    "GROUP_PROPS": []
};
$('.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 (xcom_prop_group == "") {
      console.log( test);
    } else {
      arrProps["GROUP_PROPS"].push(xcom_prop_group);
      test = xcom_prop_group;
    }
  }
});
console.log(arrProps);

[Andrey Suha]

hzzzzl, ты наверное var с let перепутал)) test и у автора виден везде, но только после его объявления

Answer 2

[hzzzzl]

так?
https://www.xcom-shop.ru/hp_22-c0015ur_645720.html

all = [...document.querySelectorAll('.prop-column div')].filter(div => !div.matches('.hide, .call, .prop-value'))
obj = {}
current = ''

all.forEach(div => {
  try {
    if(div.matches('.delimiter')) {
      obj[div.textContent] = []
      current = div.textContent
    } else {
      obj[current].push({
        [div.querySelector('.call').textContent] : div.querySelector('.prop-value').textContent
      })
    }
  } catch {}
})

console.log(obj)

Answer 3

[Roman Chasovitin]

В элемент string нельзя положить массив =) Если же вы хотите сделать массив объектом, то тут уже сложнее:

const arr = ['some'];

const props = ['something', 'more', '...'];

function createObjectFromArray(array) {
	let obj = {};
  array.map(itm => obj[itm] = itm);
  return obj;
}

function transformArrayToObject(arr, elementIndex, value) {
	if(!arr || isNaN(elementIndex) || !value) return {};
	const objectFromArr = createObjectFromArray(arr);
  objectFromArr[arr[elementIndex]] = value;
  return objectFromArr;
}

console.log(transformArrayToObject(arr, 0, props));