Как добавить уникальные свойства в название выпадающего списка?

Question

[Alisa94]

У меня есть такие массивы.

const A = [{category: "Walls", id: "1"}, {category: "Walls", id: "2"}];  //first array

const B = [{category: "Window", id: "3"}, {category: "Walls", id: "4"}]; //second array

const C = [{category: "Walls", id: "5"}, {category: "Floor", id: "6"}]; //three array

const D = [{category: "Walls", id: "5"}, {category: "Walls", id: "6"}]; //four array

Мне нужно создать такой список:

<details>
<summary>Walls</summary>
	<button class="A">1</button>
	<button class="A">2</button>
	<button class="B">4</button>
	<button class="B">5</button>
	<button class="C">5</button>
	<button class="D">6</button>
</details>
<details>
	<summary>Window</summary>
	<button class="B">3</button>
</details>
<details>
	<summary>Floor</summary>
	<button class="D">6</button>
</details>

Проблема в том, что я не разбираюсь, как мне добавить нужные данные из js массива на html страницу.
Буду очень благодарен за помощь.

Answer 1

[Андрей Гончаров]

Я сделал решение только конечного числа заранее известных массивов из твоего примера. Можно улучшить, чтобы больше автоматизировать, но работает на твоих данных из вопроса:

const A = [{category: "Walls", id: "1"}, {category: "Walls", id: "2"}];
const B = [{category: "Window", id: "3"}, {category: "Walls", id: "4"}];
const C = [{category: "Walls", id: "5"}, {category: "Floor", id: "6"}];
const D = [{category: "Walls", id: "5"}, {category: "Walls", id: "6"}];

let newArr = [];
newArr['Walls'] = [];
newArr['Window'] = [];
newArr['Floor'] = [];

const allArr = {'A':A,'B':B,'C':C,'D':D};

for (let key in allArr) {
	allArr[key].forEach(function (item) {
		let tempItem = {'id': item.id, 'class': key};
		newArr[item.category].push(tempItem);
	});
}

for (let key in newArr) {
	let section = $('<details></details>');
	let summary = $('<summary>'+key+'</summary>');

	section.appendTo('body');
	section.append(summary);

	newArr[key].forEach(function (item) {
		console.log(item);
		let newElement = $('<button class="'+item.class+'">'+item.id+'</button>');
		section.append(newElement);
	})
}

Comments

[Alisa94]

Спасибо большое. Мне кажется или это jquery? На что мне стоит заменит знак доллара, чтобы оно работало на чистом js?

[Rustam Bainazarov]

Alisa94, вам нужно сменить знак доллара на реальный доллар. И пойти на биржу фриланса :))

[Alisa94]

Чисто для интереса даю ссылку на уже законченный код, вот так в конечном итоге должен выглядеть моя задача. Буду очень рад, если вы предложить улучшение или более хорошее решение.

Answer 2

[Егор Антропов]

https://www.youtube.com/watch?v=wsJbCvHkaKU
В этом видео ты сможешь понять принцип перебора массива объектов.

Comments

[Alisa94]

Я вообщем в фронте не силён и раздражаюсь им, но бэк-энд мне больше нравится, как бы это не звучало парадоксально.

[Егор Антропов]

Alisa94, А я пока даже не знаю что чувствую к бэк-энду))
Вчера купил курс 53-ёх часовой. Буду учиться

[Alisa94]

Егор Антропов, ты про эликсир эликсир слышал? Посмотри, клёвый язык.

[Егор Антропов]

Alisa94, Спасибо! Сейчас посмотрю.

[Alisa94]

Егор Антропов, и тебе спасибо.
Короче, ты просто поинтересуйся немножко этим языком и всё поймёшь. Основные преимущества: стабильность, масштабируемость, скорость, качественный код(функциональный язык), модель акторов и liveview, который сейчас внедряют. LiveView это вообщем нечто, т.к. он полностью заменяет js. Ну конечно же браузеры продолжают работать на js, у них только встроенная поддержка WASM, но тем не менее это заменяет js код и это больше, чем Elm. Основная идея состоит в рендринге страницы со стороны сервера в реальном времени с помощью web-socket-ов.

[Егор Антропов]

Alisa94, Звучит классно! Не совсем всё понял. Обязательно попробую разобраться.

[Alisa94]

Егор Антропов, если ты хочешь чистого глотка воздуха - то это то, что нужно. Я просто удивляюсь насколько хорошо всё спланировали разработчики веб-фреймворка phoenix.

[Егор Антропов]

Alisa94, Что Вы имеете ввиду, говоря

глотка воздуха

?

[Alisa94]

Егор Антропов, если вы не знакомы с эрленгом, то в эликсире вы увидите совсем другой подход к построению веб сервера, вы познакомитесь с отп, моделью акторов и т.д.

[Alisa94]

Чисто для интереса даю ссылку на уже законченный код, вот так в конечном итоге должен выглядеть моя задача. Буду очень рад, если вы предложить улучшение или более хорошее решение.

[Егор Антропов]

Alisa94, не понял

[Alisa94]

Егор Антропов, ссылка почему та исчезла.

Answer 3

[dollar]

function makeDOM(html) { //Формируем DOM на основе структуры
	for(let category in html) {
		let det = document.createElement('details');
		let cat = document.createElement('summary');
		cat.innerText = category;
		det.appendChild(cat);
		html[category].forEach(o=>{
			let button = document.createElement('button');
			button.className = o.k;
			button.innerText = o.id;
			det.appendChild(button);
		});
		document.body.appendChild(det);
	}
}

let html = {};
function makeButton(o) { //Формируем структуру
	if (typeof o !== "object") return;
	if (o instanceof Array) {
		let k = o[o.length-1];
		o.forEach(e=>{e.k=k,makeButton(e)});
		return;
	}
	if (!o.id) {
		for(let k in o) makeButton(o[k].concat([k]));
		return;
	}
	let summary;summary = html[o.category] ||(summary = html[o.category] = []);
	summary.push({k:o.k,id:o.id});
}

window.addEventListener('DOMContentLoaded',e=>{
	makeButton({A:A,B:B,C:C,D:D});
	makeDOM(html);
});

Comments

[Alisa94]

Спасибо большое, но почему-то это у меня не сработало.

[dollar]

Ваш код с const A и т.д. не забыли добавить в начале?

[dollar]

И что значит не сработало? К программировании нет такого слова. Всегда есть причина или симптомы.
Нажмите F12 и смотрите в консоли, что за ошибка при обновлении страницы. У меня всё сработало.

[Alisa94]

dollar, code
Не знаю в чём причина.