如何用JavaScript遍历JSON数据？代码仅获单条数据的问题排查

我来帮你拆解下问题～ 你现在的代码只能渲染出一张图片，核心原因是你只遍历了外层的graphicdesigner数组（它里面只有1个对象），却没去遍历这个对象里的image数组——而你要展示的3张图片都存在这个image数组里呢！

先看你的JSON结构（补全后大概是这样）：

{
  "skills": {
    "graphicdesigner": [
      {
        "label": "CorelDraw & Adobe Illustrator",
        "image": ["rimba.jpg","programmer.png","gallery1.jpg"]
      }
    ]
  }
}

graphicdesigner是一个数组，里面的单个对象包含了image数组（存着3张图片路径）。你原来的代码只遍历了graphicdesigner数组（仅1次循环），然后用data.image[i]取图片，这里的i是graphicdesigner数组的索引（也就是0），所以只会拿到image[0]这一张图。

修改后的代码 #

$.getJSON('profil.json', function(data) {
  // 先拿到graphicdesigner数组里的设计师对象（如果以后有多个设计师，这里可以加外层遍历）
  const designerData = data.skills.graphicdesigner[0];
  
  // 重点：遍历image数组里的每一张图片
  $.each(designerData.image, function(imgIndex, imgSrc) {
    // 注意：不要重复使用相同的ID！这里把ID改成类名，避免DOM冲突
    $('#designimg').append(`
      <div class="col-4 pb-3">
        <img class="myImg" src="img/thumbs/${imgSrc}" alt="Design work" style="width:100%;max-width:300px">
        <div class="modal">
          <span class="close">&times;</span>
          <img class="modal-content">
          <div class="caption"></div>
        </div>
      </div>
    `);
  });

  // 给动态生成的模态框绑定事件（用事件委托）
  $('#designimg').on('click', '.myImg', function() {
    const $modal = $(this).siblings('.modal');
    const $modalImg = $modal.find('.modal-content');
    const $caption = $modal.find('.caption');
    
    $modal.show();
    // 假设大图不在thumbs文件夹，这里替换路径（如果不需要可以去掉replace）
    $modalImg.attr('src', $(this).attr('src').replace('thumbs/', ''));
    $caption.text($(this).attr('alt'));
  });

  // 关闭模态框
  $('#designimg').on('click', '.close', function() {
    $(this).closest('.modal').hide();
  });
});

关键修改点说明 #

1. 嵌套遍历图片数组：专门针对designerData.image做遍历，确保每张图片都能生成对应的DOM元素
2. 避免重复ID：把原来的myImg、myModal等ID改成类名，因为DOM中ID必须唯一，重复ID会导致事件绑定失效、元素选择错误
3. 事件委托绑定事件：因为图片和模态框是动态生成的，直接绑定事件会失效，所以用事件委托把事件绑定到父元素#designimg上
4. 如果以后有多个设计师：可以把取designerData的部分改成外层遍历，比如：

   $.each(data.skills.graphicdesigner, function(designerIndex, designerData) {
     // 这里遍历每个设计师的image数组
     $.each(designerData.image, function(imgIndex, imgSrc) {
       // 生成DOM...
     });
   });
   

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