Как отобразить вложенности js объекта на странице?

Question

[Alisa94]

Имею такой исходные данные:

const A = [
  { category: "Walls", id: "1", symbol: "Wall-Ext_102", family: "Basic Walls" },
  { category: "Walls", id: "2", symbol: "Wall-Ext_102", family: "Basic Walls" }
];
const B = [
  { category: "Window", id: "3", symbol: "Window-Ext_102", family: "Basic Window" },
  { category: "Walls", id: "4", symbol: "Wall-Other-102", family: "Other Walls" }
];
const C = [
  { category: "Walls", id: "5", symbol: "Wall-Ext_102", family: "Basic Walls" },
  { category: "Floor", id: "6", symbol: "Floor-Ext_102", family: "Basic Floor" }
];
const D = [
  { category: "Walls", id: "5", symbol: "Wall-Ext_102", family: "Basic Walls" },
  { category: "Walls", id: "6", symbol: "Wall-Ext_102", family: "Basic Walls" }
];

После получаю такой объект:

const data = [...A, ...B, ...C, ...D];

const result = data.reduce((acc, curr) => {
  const {category, family, symbol, id} = curr;
  acc.category[category] = acc.category[category] || {family: {}};
  acc.category[category].family[family] = acc.category[category].family[family] || {symbol: {}};
  acc.category[category].family[family].symbol[symbol] = acc.category[category].family[family].symbol[symbol] || {id: []};
  acc.category[category].family[family].symbol[symbol].id.push(id);
  return acc;
}, {category: {}});

Теперь хочу отобразить этот объект на html странице как выпадающий список. Все мои имеющиеся коды не подходят для этого. Буду очень благодарен за помощь.

Answer 1

[hzzzzl]

в смысле как-то так?

html = ''

for (key in result.category) {
	html += `<p>${key}</p><select>`

	for (key1 in result.category[key].family) {
		html += `<option>${key1}</option>`
    }

	html += `</select>`
}

https://codepen.io/anon/pen/NZqJXp

Comments

[Alisa94]

Простите, что не так корректно выразился. Примерно так.

[hzzzzl]

Alisa94, ну в общем так же, циклами и добавлением имен свойств куда надо между нужными тэгами :)

https://codepen.io/anon/pen/gNpJzE?editors=1010

[Alisa94]

hzzzzl, а вот то, что творил я. Не могли бы вы изменить свой ответ на этот?
Спасибо вам бооольшое!

[Alisa94]

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