如何在jQuery的html()方法中映射JSON内的嵌套数组？

你当前的核心问题是模板字符串的语法错误，导致数组无法被正确拆分为单个<li>标签。错误写法里把map方法写在了插值外面，模板字符串无法识别执行这个JS逻辑。

错误写法分析 #

你尝试的代码中，${item.ingredients}只会把数组转成逗号分隔的字符串，后面的.map(...)会被当成普通文本输出，自然达不到效果。

正确修改方案 #

把整个map调用放在模板字符串的插值${}内部，为每个食材生成独立的<li>标签，最后用.join('')把数组拼接成完整的HTML字符串：

<ul class="uk-list uk-list-divider">
  ${item.ingredients.map(ingredient => `<li>${ingredient}</li>`).join('')}
</ul>

完整的渲染代码 #

这里顺便把图片路径改成了JSON中对应的item.img，避免所有卡片用同一张图：

$("#juices").html(`
  ${data.map(item => `
    <div>
      <div class="uk-card uk-card-default">
        <div class="uk-card-media-top">
          <img src="./assets/images/${item.img}" width="600" height="400" alt="${item.name}">
        </div>
        <div class="uk-card-body">
          <h3 class="uk-card-title heading">${item.name}</h3>
          <p>${item.desc}</p>
          <ul class="uk-list uk-list-divider">
            ${item.ingredients.map(ingredient => `<li>${ingredient}</li>`).join('')}
          </ul>
        </div>
      </div>
    </div>
  `).join('')}                      
`)

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