使用JQuery读取指定JSON结构中availability数组时map报错如何解决

• data.items.adidas 是数组类型，availability 属性属于该数组下的单个商品元素，并非直接挂载在 adidas 数组上，直接访问 data.items.adidas.availability 会得到 undefined，对 undefined 调用 map 方法就会触发你遇到的报错。

你需要在遍历 adidas 数组获取单个商品对象后，再遍历当前商品的 availability 属性读取尺码和库存信息，修改后的代码示例如下：

const $showData = $("#show-data");

$.getJSON("data.json", (data) => {
  const markup = data.items.adidas.map((item) => `
    <!--Product-->
    <img src="${item.image}" alt="shoes image" class="u-max-full-width">
    <h3 class="bold title">${item.name}</h3>
    <h2 class="price">${item.price}</h2>
    <p class="subtitle">${item.brand}</p>
    <p class="desc">${item.description}</p>
    <!-- 渲染可用尺码库存 -->
    <div class="size-stock">
      <h4>可选尺码</h4>
      <ul>
        ${item.availability.map(stock => `<li>尺码${stock.size}：剩余${stock.quantity}件</li>`).join('')}
      </ul>
    </div>
  `).join("");

  const list = $("<p />").html(markup);
  $showData.html(list);
});

如果存在部分商品没有 availability 字段的情况，可以加可选链防御异常：
${item.availability?.map(stock => ...).join('') || '<li>暂无库存</li>'}

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