解决将对象数组数据渲染至卡片时的Undefined错误

我有一个包含以下字段的对象数组：

• image
• title
• price
• vendor

尝试将数组中的每条数据渲染到对应的卡片组件时出现了Undefined错误，推测是数组访问方式有误，求解决办法。

JavaScript #

const products = '[ { "user_id": "666", "products": [ { "id": "7109593301197", "name": "Product1", "img": "https://www.kasandbox.org/programming-images/avatars/spunky-sam.png", "handle": "handle1", "price": "111.0", "vendor": "Vendor1" }, { "id": "7076369957069", "name": "Product2", "img": "https://www.kasandbox.org/programming-images/avatars/purple-pi-pink.png", "handle": "handle2", "price": "85.0", "vendor": "Vendor2" }, { "id": "7182779154637", "name": "Product3", "img": "https://www.kasandbox.org/programming-images/avatars/mr-pants.png", "handle": "handle3", "price": "435.0", "vendor": "Vendor3" }] } ]';
const data = JSON.parse(products);
const cardElements = document.getElementsByClassName("related-prod-wrapper");

for (var i = 0; i < data.length; i++) {
  const currentCardElement = cardElements.item(i);
  const cardImage = currentCardElement.getElementsByClassName("image").item(0);
  cardImage.setAttribute("src", data[i].img);
}

const cardElements2 = document.getElementsByClassName("related-prod-detail");

for (var i = 0; i < data.length; i++) {
  const currentCardElement2 = cardElements2.item(i);

  const cardVendor = currentCardElement2.getElementsByClassName("vendor").item(0);
  cardVendor.innerHTML = data[i].vendor;

  const cardTitle = currentCardElement2.getElementsByClassName("title").item(0);
  cardTitle.innerHTML = data[i].name;

  const cardPrice = currentCardElement2.getElementsByClassName("precio").item(0);
  cardPrice.innerHTML = data[i].price;

}

HTML #

<div class="med-product-card">
  <div class="related-prod-wrapper">
    <img class="image">
  </div>
  <div class="related-prod-detail">
    <h3 class="vendor">Vendor</h3>
    <h3 class="title">Card 1</h3>
    <h3 class="precio">Precio</h3>
  </div>
</div>

<div class="med-product-card">
  <div class="related-prod-wrapper">
    <img class="image">
  </div>
  <div class="related-prod-detail">
    <h3 class="vendor">Vendor</h3>
    <h3 class="title">Card 1</h3>
    <h3 class="precio">Precio</h3>
  </div>
</div>

<div class="med-product-card">
  <div class="related-prod-wrapper">
    <img class="image">
  </div>
  <div class="related-prod-detail">
    <h3 class="vendor">Vendor</h3>
    <h3 class="title">Card 1</h3>
    <h3 class="precio">Precio</h3>
  </div>
</div>

核心问题是数据结构层级访问错误：

1. 解析后的data是一个仅包含1个元素的数组，这个元素内部的products字段才是你实际需要的产品列表数组。
2. 你之前直接遍历data数组（长度为1），但实际要遍历的是data[0].products（长度为3），同时访问字段时要从products数组的元素中获取，而非data的元素。

修改后的JavaScript代码如下：

const products = '[ { "user_id": "666", "products": [ { "id": "7109593301197", "name": "Product1", "img": "https://www.kasandbox.org/programming-images/avatars/spunky-sam.png", "handle": "handle1", "price": "111.0", "vendor": "Vendor1" }, { "id": "7076369957069", "name": "Product2", "img": "https://www.kasandbox.org/programming-images/avatars/purple-pi-pink.png", "handle": "handle2", "price": "85.0", "vendor": "Vendor2" }, { "id": "7182779154637", "name": "Product3", "img": "https://www.kasandbox.org/programming-images/avatars/mr-pants.png", "handle": "handle3", "price": "435.0", "vendor": "Vendor3" }] } ]';
const data = JSON.parse(products);
// 获取实际的产品列表数组
const productList = data[0].products;
const cardElements = document.getElementsByClassName("related-prod-wrapper");
const cardElements2 = document.getElementsByClassName("related-prod-detail");

// 遍历产品列表，而非data数组
for (let i = 0; i < productList.length; i++) {
  const product = productList[i];
  
  // 处理图片
  const currentCardElement = cardElements.item(i);
  const cardImage = currentCardElement.getElementsByClassName("image").item(0);
  cardImage.setAttribute("src", product.img); // 对应你描述的image字段
  
  // 处理产品详情
  const currentCardElement2 = cardElements2.item(i);
  
  const cardVendor = currentCardElement2.getElementsByClassName("vendor").item(0);
  cardVendor.innerHTML = product.vendor;
  
  const cardTitle = currentCardElement2.getElementsByClassName("title").item(0);
  cardTitle.innerHTML = product.name; // 对应你描述的title字段
  
  const cardPrice = currentCardElement2.getElementsByClassName("precio").item(0);
  cardPrice.innerHTML = product.price;
}

额外优化建议：

• 将两个循环合并为一个，减少冗余代码
• 使用let替代var，避免循环变量的作用域问题

内容的提问来源于stack exchange，提问作者dev_safh