Alpine.js获取JSON数组内数据时无法显示的问题

兄弟，我看你遇到的问题是用Alpine.js遍历JSON里的食材列表时完全没输出内容对吧？这事儿我之前也碰过，大概率是几个小细节没注意到，给你捋捋可能的问题点：

首先，先检查字段拼写！你代码里写的data.recipies.ingredients，这里的recipies是不是拼写错了？正确的“菜谱”复数是recipes（是c不是p），如果你的JSON文件里的键是recipes，但代码里写成了recipies，那肯定拿不到数据，这是最容易犯的低级错误，先核对下JSON里的字段名和你代码里的是不是完全一致，大小写、拼写半点儿都不能错！

然后，假设拼写没问题，那大概率是数据结构的遍历逻辑错了。举个例子，你的JSON结构大概率是这样的：

{
  "recipes": [
    {
      "id": 1,
      "title": "番茄炒蛋",
      "ingredients": ["番茄", "鸡蛋", "盐"]
    },
    {
      "id": 2,
      "title": "红烧肉",
      "ingredients": ["五花肉", "冰糖", "生抽"]
    }
  ]
}

这里的data.recipes是一个菜谱数组，每个数组项才是包含ingredients的菜谱对象。你直接写x-for="ingredient in data.recipies.ingredients"相当于从“菜谱数组”这个对象里找ingredients属性，但数组本身根本没有这个属性，自然拿不到数据，输出为空。

正确的写法应该是嵌套遍历：先遍历每个菜谱，再在每个菜谱里遍历对应的食材，代码大概是这样的：

<div x-data="{ data: {} }" x-init="
  fetch('/path/to/your-local.json')
    .then(res => res.json())
    .then(fetchedData => { this.data = fetchedData })
">
  <!-- 先遍历每一个菜谱 -->
  <div x-for="recipe in data.recipes" :key="recipe.id">
    <h3 x-text="recipe.title"></h3>
    <!-- 再遍历当前菜谱下的食材列表 -->
    <p x-for="ingredient in recipe.ingredients" :key="ingredient">
      TEST: {{ ingredient }}
    </p>
  </div>
</div>

另外，还有个小细节要注意：

• 记得在x-init里加个console.log(fetchedData)，打开浏览器控制台看看实际拿到的数据结构是不是你预期的，确认recipes数组存在，且每个菜谱里确实有ingredients数组，别光靠脑补，实际打印出来才靠谱。
• 所有x-for都要加上:key属性，Alpine.js需要它来跟踪列表项的变化，避免奇怪的渲染bug，这是规范写法，别偷懒。

备注：内容来源于stack exchange，提问作者Alex