获取数据组并在js中转换为对象

如何解决获取数据组并在js中转换为对象

我收到了来自 li

的 html 标签

<li data-group="man">
    <span>15</span>
    <h5>alex</h5>
</li>
<li data-group="man">
    <span>20</span>
    <h5>jack</h5>
</li>
<li data-group="man">
    <span>30</span>
    <h5>john</h5>
</li>
<li data-group="woman">
    <span>25</span>
    <h5>Kianna</h5>
</li>
<li data-group="woman">
    <span>17</span>
    <h5>ela</h5>
</li>
<li data-group="woman">
    <span>25</span>
    <h5>Emery</h5>
</li>

我想使用 foreach 生成 li，如果它们具有相同的数据组，则将它们转换为对象。

    "man":{
        "alex":15,"jack":20,"john":30
    },"woman":{
        "Kianna":25,"ela":17,"Emery":25
    }

最后，它们应该是 assigned 到一个空对象

对象不应该是 0,1,2...

解决方法

使用 document.querySelectorAll('[data-group]') 获取带有 [data-group] 标签的所有项目。将NodeList展开到数组，将数组reduce展开到对象：

const result = [...document.querySelectorAll('[data-group]')]
  .reduce((acc,el) => ({
    ...acc,[el.dataset.group]: {
      ...acc[el.dataset.group],[el.children[1].textContent]: +el.children[0].textContent
    }
  }),{})
  
console.log(result)

ul { visibility: hidden; }
.as-console-wrapper { max-height: 100% !important; top: 0; }

<ul> <li data-group="man"> <span>15</span> <h5>alex</h5> </li><li data-group="man"> <span>20</span> <h5>jack</h5> </li><li data-group="man"> <span>30</span> <h5>john</h5> </li><li data-group="woman"> <span>25</span> <h5>Kianna</h5> </li><li data-group="woman"> <span>17</span> <h5>ela</h5> </li><li data-group="woman"> <span>25</span> <h5>Emery</h5> </li></ul>

您也可以使用 NodeList.forEach() 创建对象：

const result = {}

document.querySelectorAll('[data-group]')
  .forEach(el => {
    const { group } = el.dataset
    const [value,key] = el.children
    
    if(!result[group]) result[group] = {}
    
    result[group][key.textContent] = +value.textContent
  })
  
console.log(result)

ul { visibility: hidden; }
.as-console-wrapper { max-height: 100% !important; top: 0; }

<ul> <li data-group="man"> <span>15</span> <h5>alex</h5> </li><li data-group="man"> <span>20</span> <h5>jack</h5> </li><li data-group="man"> <span>30</span> <h5>john</h5> </li><li data-group="woman"> <span>25</span> <h5>Kianna</h5> </li><li data-group="woman"> <span>17</span> <h5>ela</h5> </li><li data-group="woman"> <span>25</span> <h5>Emery</h5> </li></ul>