点击事件下jQuery加载JSON数组后格式化输出异常求助

看起来你遇到的问题是没有正确遍历JSON数组中的对象，导致id和name没有一一配对输出——你现在的逻辑应该是先把所有id批量输出，再批量输出所有name，所以才会出现1 2 3 admin user1 user2的结果。要实现1 admin 2 user1 4 user2的配对输出，核心是遍历数组中的每一个对象，同时取出当前对象的id和对应的name进行拼接。

修正后的代码示例 #

假设你加载的JSON数组结构是这样的：

[
  {"id": 1, "name": "admin"},
  {"id": 2, "name": "user1"},
  {"id": 4, "name": "user2"}
]

你可以这样修改你的点击事件代码：

$("#clickmetoload").click(function() {
  // 加载JSON数据（这里用$.getJSON举例，你可以替换成实际的请求方式）
  $.getJSON("your-data-source.json", function(receivedData) {
    // 可选：清空目标元素，避免多次点击重复追加内容
    $('#id').empty();
    
    // 遍历数组中的每一个对象
    $.each(receivedData, function(index, item) {
      // 拼接当前对象的id和name，追加到目标元素
      $('#id').append(`<span class="id">${item.id}</span> <span class="name">${item.name}</span> `);
    });
  });
});

关键说明 #

1. 遍历数组而非批量取属性：原代码中received.id和received.name的写法是错误的（数组本身没有id/name属性），必须通过$.each或原生forEach遍历数组中的每个对象，每次处理单个对象的id和name。
2. 模板字符串简化拼接：使用ES6模板字符串（反引号`）可以避免手动转义引号，让HTML拼接代码更易读。
3. 可选的清空操作：添加$('#id').empty()可以防止多次点击按钮时，内容重复追加。

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