1

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

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 страницу. Буду очень благодарен за помощь.

2

2 ответа 2

2

надеюсь я правильно понял что Вам нужно)

const array = [
  {
    'category': [
      {
        'name': 'Walls',
        'items': [
          {
            'id': '1'
          },
          {
            'id': '2'
          }
        ]
      },
      {
        'name': 'Window',
        'items': [
          {
            'id': '3'
          },
          {
            'id': '4'
          }
        ]
      },
      {
        'name': 'Walls',
        'items': [
          {
            'id': '5'
          },
          {
            'id': '6'
          }
        ]
      },
      {
        'name': 'Walls',
        'items': [
          {
            'id': '7'
          },
          {
            'id': '8'
          }
        ]
      }
    ]
  }
]

array[0].category.map((category, index) => {
  const categoryNode = `
    <details>
        <summary>${category.name}</summary>
    </details>
  `
  
  document.querySelector('#root').innerHTML += categoryNode;
});

[...document.querySelectorAll('details')].forEach(details => {
  const node = document.querySelector('#root');
  const detailsIndex = [...node.children].indexOf(details);
  
  array[0].category[detailsIndex].items.map((item, index) => {
    const itemNode = `
      <button class="${item.id}">${item.id}</button>
    `
    
    document.querySelectorAll('details')[detailsIndex].innerHTML += itemNode;
  });
});
<div id="root"></div>

1
  • Спасибо большое. Почти правильно. Я там имею список, где для каждой категории отводится отдельный выпадающий лист, а нужно, чтобы, если выпадающих листом было только столько, сколько есть уникальных категорий, т.е. в этом случаи 3 штук. 11 июн 2019 в 11:45
1

Если немного изменить формат входных данных, то можно так сделать:

var mas = [{
    key: "A",
    "value": [{
        category: "Walls",
        family: "Basic Walls",
        id: "1"
      },
      {
        category: "Walls",
        family: "Basic Walls",
        id: "2"
      },
      {
        category: "Walls",
        family: "Second Walls",
        id: "22"
      },
      {
        category: "Walls",
        family: "Second Walls",
        id: "23"
      },
    ]
  },
  {
    key: "B",
    "value": [{
        category: "Window",
        family: "Basic Window",
        id: "3"
      },
      {
        category: "Walls",
        family: "Basic Walls",
        id: "4"
      }
    ]
  },
  {
    key: "C",
    "value": [{
        category: "Walls",
        family: "Basic Walls",
        id: "5"
      },
      {
        category: "Floor",
        family: "Basic Floor",
        id: "6"
      }
    ]
  },
  {
    key: "D",
    "value": [{
        category: "Walls",
        family: "Basic Walls",
        id: "5"
      },
      {
        category: "Walls",
        family: "Basic Walls",
        id: "6"
      }
    ]
  }
];

var newarr = [];
var output = {};

mas.forEach(function(element, key) {
  element.value.forEach(function(oneelement, onekey) {
    if (output[oneelement.category] === undefined) output[oneelement.category] = {};
    if (output[oneelement.category][oneelement.family] === undefined) output[oneelement.category][oneelement.family] = [];
    output[oneelement.category][oneelement.family].push({
      clas: element.key,
      val: oneelement.id
    });
  });
});

Object.keys(output).map(function(objectKey, index) {
  var category = output[objectKey];
  var caption = '<details class="list_' + index + '"><summary>' + objectKey + '</summary></details>';

  document.querySelector('.list').innerHTML += caption;

  var all = '';
  Object.keys(category).map(function(vaL, iX) {

    var summary = '<details class="family_' + index + '_' + iX + '"><summary>' + vaL + '</summary></details>';
    document.querySelector('.list_' + index).innerHTML += summary;
    all = '';
    output[objectKey][vaL].forEach(function(val, key) {
      all = all + '<button class="' + val.clas + '">' + val.val + '</button>';
    });
    document.querySelector('.family_' + index + '_' + iX).innerHTML += all;
  });

});
body{font-family:tahoma;font-size:18px}
details details{margin-left:15px}
.list {max-width:400px;background:#eee;padding:15px}
<div class="list"></div>

PS: я изменил ответ под ваши требования, но хочу заметить, что это только для частного случая и как вы видите с каждым уровнем вложенности растет размер кода. На будущее советую вам - использовать плоские объекты в качестве входных данных.

3
  • Спасибо вам большое, это помогло. Не могли ли вы подсказать, как я могу добавить в вложенность категорий ещё одну вложенность, скажем family с названием, например, 'Basic Wall'? 11 июн 2019 в 13:15
  • Простите, не совсем понимаю вас. Не могли бы вы подробнее описать желаемую структуру данных. 11 июн 2019 в 14:11
  • Вот тут приведён код, в котором добавлен новый узел под названием family. Если не сложно добавьте отображение этого свойства из js-а. Большое спасибо. 11 июн 2019 в 15:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.