如何访问JSON嵌套对象中的name属性并渲染到HTML的li标签中？

云原生阿岚

2026-4-29

解决JSON嵌套对象的name属性获取问题

嘿，这问题很常见！你现在的代码已经能拿到vendors对象的键（"1"、"2"、"4"）了，要获取对应的name属性其实只需要多一步——用这些键去访问vendors里对应的子对象就行。

方法一：基于现有代码修改

你可以在循环里通过data.vendors[number]拿到每个vendor的完整对象，然后直接提取name属性：

fetch("jsonpage")
  .then((res) => res.json())
  .then((data) => {
    for (const number of Object.keys(data.vendors)) {
      // 用键获取对应的vendor对象，再取name属性
      const vendorName = data.vendors[number].name;
      let newVendor = document.createElement("li");
      newVendor.textContent = vendorName;
      ulList.appendChild(newVendor);
    }
  })
  .catch(console.error);

方法二：更简洁的`Object.values`写法

如果你不需要用到那些数字键，直接用Object.values()可以直接获取vendors里的所有子对象数组，循环起来更直观：

fetch("jsonpage")
  .then((res) => res.json())
  .then((data) => {
    // 直接拿到所有vendor对象的数组
    for (const vendor of Object.values(data.vendors)) {
      let newVendor = document.createElement("li");
      // 直接访问vendor的name属性
      newVendor.textContent = vendor.name;
      ulList.appendChild(newVendor);
    }
  })
  .catch(console.error);