需追加JSON响应：基于给定示例数据与HTML片段的技术问询

我来帮你搞定把JSON数据追加到HTML列表的需求，下面是具体的实现方案：

给定的JSON响应数据 #

[{ 
  "letter": "A", 
  "data": [
    { "cuisine_id": "1", "cuisine_name": "American" }, 
    { "cuisine_id": "2", "cuisine_name": "Arabic" }, 
    { "cuisine_id": "3", "cuisine_name": "Asian" } 
  ] 
}, { 
  "letter": "B", 
  "data": [
    { "cuisine_id": "4", "cuisine_name": "Bakery" }, 
    { "cuisine_id": "7", "cuisine_name": "Burgers" } 
  ] 
}, { 
  "letter": "N", 
  "data": [
    { "images": "1.png", "cuisine_id": "14", "cuisine_name": "New Cuisine" }
  ] 
}]

目标HTML元素 #

假设你的完整列表元素是这样的：

<ul class="filter-list"></ul>

原生JavaScript实现方案 #

这个方案不需要依赖任何库，直接用浏览器原生API就能完成数据追加：

// 假设你已经通过接口请求或者其他方式获取到了JSON数据，存到cuisineData变量中
const cuisineData = [{ 
  "letter": "A", 
  "data": [
    { "cuisine_id": "1", "cuisine_name": "American" }, 
    { "cuisine_id": "2", "cuisine_name": "Arabic" }, 
    { "cuisine_id": "3", "cuisine_name": "Asian" } 
  ] 
}, { 
  "letter": "B", 
  "data": [
    { "cuisine_id": "4", "cuisine_name": "Bakery" }, 
    { "cuisine_id": "7", "cuisine_name": "Burgers" } 
  ] 
}, { 
  "letter": "N", 
  "data": [
    { "images": "1.png", "cuisine_id": "14", "cuisine_name": "New Cuisine" }
  ] 
}];

// 获取页面上的目标列表元素
const filterList = document.querySelector('.filter-list');

// 遍历每个字母分组
cuisineData.forEach(group => {
  // 创建分组标题的列表项，用来区分不同字母的美食组
  const groupHeader = document.createElement('li');
  groupHeader.classList.add('filter-group-header');
  groupHeader.textContent = group.letter;
  filterList.appendChild(groupHeader);

  // 遍历当前分组下的每一个美食数据
  group.data.forEach(cuisine => {
    const cuisineItem = document.createElement('li');
    cuisineItem.classList.add('filter-item');
    
    // 构建列表项的内容，包含美食ID、名称，如果有图片的话也一并添加
    let itemContent = `
      <span class="cuisine-id">ID: ${cuisine.cuisine_id}</span>
      <span class="cuisine-name">${cuisine.cuisine_name}</span>
    `;
    // 检查当前美食是否有图片字段，有的话插入图片标签
    if (cuisine.images) {
      itemContent = `
        <img src="${cuisine.images}" alt="${cuisine.cuisine_name}" class="cuisine-image">
        ${itemContent}
      `;
    }
    
    cuisineItem.innerHTML = itemContent;
    filterList.appendChild(cuisineItem);
  });
});

样式优化建议 #

为了让列表看起来更美观，可以添加一些CSS样式：

/* 分组标题样式 */
.filter-group-header {
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* 单个美食项样式 */
.filter-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* 美食图片样式 */
.cuisine-image {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 50%;
}

/* 美食ID样式 */
.cuisine-id {
  color: #666;
  font-size: 0.9rem;
}

/* 美食名称样式 */
.cuisine-name {
  margin-left: 0.5rem;
  font-size: 1rem;
  color: #333;
}

jQuery简化实现方案 #

如果你的项目已经引入了jQuery，也可以用更简洁的代码来实现：

const cuisineData = [{ /* 你的JSON数据 */ }];

// 遍历每个字母分组
$.each(cuisineData, function(index, group) {
  // 添加分组标题到列表
  $('.filter-list').append(`<li class="filter-group-header">${group.letter}</li>`);
  
  // 遍历当前分组下的美食数据，添加每个列表项
  $.each(group.data, function(i, cuisine) {
    let itemHtml = `
      <li class="filter-item">
        <span class="cuisine-id">ID: ${cuisine.cuisine_id}</span>
        <span class="cuisine-name">${cuisine.cuisine_name}</span>
      </li>
    `;
    // 有图片的话插入图片标签
    if (cuisine.images) {
      itemHtml = `
        <li class="filter-item">
          <img src="${cuisine.images}" alt="${cuisine.cuisine_name}" class="cuisine-image">
          <span class="cuisine-id">ID: ${cuisine.cuisine_id}</span>
          <span class="cuisine-name">${cuisine.cuisine_name}</span>
        </li>
      `;
    }
    $('.filter-list').append(itemHtml);
  });
});

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