如何在JavaScript中遍历数组内的嵌套对象并逐个展示其属性

云上老周

2026-9-23

解决方案

原生JavaScript实现

假设product.categories为嵌套对象组成的数组，你可以先遍历数组内的所有对象，再遍历单个对象的属性值，依次拼接<li>元素即可，实现代码如下：

// 示例数据结构，和你截图的product.categories结构匹配
const product = {
  categories: [
    {
      name: 'Bath',
      path: '/bath/',
      id: 18
    },
    {
      name: 'Shop all',
      path: '/shop-all/',
      id: 23
    }
  ]
}

// 生成ul结构逻辑
let ulHtml = '<ul>\n'
product.categories.forEach(category => {
  // 按顺序取对象的属性值生成li
  Object.values(category).forEach(val => {
    ulHtml += `  <li>${val}</li>\n`
  })
})
ulHtml += '</ul>'

// 直接打印结果，或者插入到页面对应节点中
console.log(ulHtml)
// 插入页面示例：document.querySelector('.category-container').innerHTML = ulHtml

框架场景实现

Vue示例

<template>
  <ul>
    <template v-for="item in product.categories" :key="item.id">
      <li v-for="(val, idx) in Object.values(item)" :key="idx">
        {{ val }}
      </li>
    </template>
  </ul>
</template>

React示例

function CategoryRender({product}) {
  return (
    <ul>
      {product.categories.flatMap(item => 
        Object.values(item).map((val, i) => <li key={`${item.id}-${i}`}>{val}</li>)
      )}
    </ul>
  )
}