如何使用jQuery遍历JSON对象并生成指定HTML结构

我来帮你搞定这个问题！你需要把给定的JSON数组转换成指定的HTML结构，用jQuery可以轻松实现，下面是具体步骤和代码：

第一步：确认你的JSON数据 #

首先是你提供的这份披萨数据：

[ 
  { 
    "name": "Webredpizzan", 
    "price": 20, 
    "content":["Ost","Gorgonzola","Mozarella"], 
    "picture":"images/item3.jpg" 
  }, 
  { 
    "name": "IT-pizzan", 
    "price": 10, 
    "content":["Ost","Lamm","Kalkon"], 
    "picture":"images/item1.jpg" 
  }, 
  { 
    "name": "Bibliotekspizzan", 
    "price": 11, 
    "content":["Ost","Basilika","Mozarella"], 
    "picture":"images/item2.jpg" 
  }, 
  { 
    "name": "Frukt-pizzan", 
    "price": 20, 
    "content":["Banan","Blåbär","Äpple"], 
    "picture":"images/item3.jpg" 
  } 
]

第二步：实现jQuery遍历与HTML生成 #

你可以用jQuery的$.each()方法遍历这个JSON数组，逐个拼接符合要求的HTML结构，最后把生成的内容插入到页面的容器中（比如提前在页面里加一个<div id="pizza-container"></div>）。

完整代码如下：

// 假设你的JSON数据存储在这个变量里
const pizzaData = [ 
  { 
    "name": "Webredpizzan", 
    "price": 20, 
    "content":["Ost","Gorgonzola","Mozarella"], 
    "picture":"images/item3.jpg" 
  }, 
  { 
    "name": "IT-pizzan", 
    "price": 10, 
    "content":["Ost","Lamm","Kalkon"], 
    "picture":"images/item1.jpg" 
  }, 
  { 
    "name": "Bibliotekspizzan", 
    "price": 11, 
    "content":["Ost","Basilika","Mozarella"], 
    "picture":"images/item2.jpg" 
  }, 
  { 
    "name": "Frukt-pizzan", 
    "price": 20, 
    "content":["Banan","Blåbär","Äpple"], 
    "picture":"images/item3.jpg" 
  } 
];

// 初始化HTML字符串
let html = '';
// 遍历每个披萨对象
$.each(pizzaData, function(index, pizza) {
  // 把content数组转成逗号分隔的字符串，方便显示
  const contentText = pizza.content.join(', ');
  // 用模板字符串拼接单个披萨的HTML结构
  html += `
    <div class="pizza_details"> 
      <img src="${pizza.picture}" alt="${pizza.name}" /> 
      <div class="desc">
        <ul> 
          <li><span>Namn</span> : ${pizza.name}</li> 
          <li><span>Pris</span> : ${pizza.price}</li> 
          <li><span>Innehåll</span> : ${contentText}</li> 
        </ul>
      </div>
      <div class="clear"></div> 
    </div>
  `;
});

// 把生成好的HTML插入到页面容器中
$('#pizza-container').html(html);

关键细节说明： #

• 用$.each()遍历数组时，index是当前元素的序号，pizza是当前的披萨数据对象，直接调用属性就能取到对应值
• 因为content是数组格式，所以用join(', ')把它转换成逗号分隔的字符串，避免页面显示数组的原始格式
• 用ES6模板字符串（反引号`）拼接HTML，比传统的字符串拼接更清晰，不容易出错
• 记得先在页面里引入jQuery库，否则这段代码无法运行

如果你的JSON数据是从后端接口获取的，只需要把遍历逻辑放到接口请求的回调里就行，比如：

$.get('你的披萨数据接口地址', function(data) {
  let html = '';
  $.each(data, function(index, pizza) {
    // 这里的逻辑和上面一致
  });
  $('#pizza-container').html(html);
});

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