主页 / 问题 / 991669
Accepted
Alisa Bondarchuk
Asked:2020-06-11 18:20:52 +0000 UTC2020-06-11 18:20:52 +0000 UTC

如何向下拉列表标题添加唯一属性？

  • 772

我有这样的数组。

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 页面。我将非常感谢您的帮助。

javascript

2 个回答

  1. 我希望我能正确理解你的需要）

    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>

    • 2
  2. Best Answer

    如果你稍微改变输入数据的格式，那么你可以这样做：

    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：我更改了答案以满足您的要求，但我想注意这仅适用于特殊情况，如您所见，代码的大小随着嵌套的每一级而增长。对于未来，我建议您使用平面对象作为输入。

    • 1

相关问题