如何使用jQuery获取Ajax响应中ranks的id与name字段？

嘿，我看了你的代码和返回的响应数据，先给你理清楚问题出在哪，再给你调整后的代码～

首先，你的Ajax响应格式有问题：里面有乱码、语法错误（比如多余的逗号、重复的description字段），这会导致jQuery解析JSON失败，第一步一定要让后端返回合法的JSON格式，修正后响应应该类似这样（我帮你整理了合法结构）：

[
  {
    "id": 118,
    "organization_id": 6035,
    "school_id": null,
    "picture": "",
    "name": "Hapkido",
    "description": "Kicks",
    "created_at": "2017-05-22 15:34:32",
    "updated_at": "2017-05-22 15:34:32",
    "ranks": [
      {"id": 561, "style_id": 118, "level": 1, "name": "1st Dan "},
      {"id": 562, "style_id": 118, "level": 2, "name": "1st Gup"},
      {"id": 563, "style_id": 118, "level": 3, "name": "2nd Gup"},
      {"id": 564, "style_id": 118, "level": 4, "name": "3rd Gup"},
      {"id": 565, "style_id": 118, "level": 5, "name": "4th Gup"},
      {"id": 917, "style_id": 118, "level": 6, "name": "5th Gup"}
    ]
  }
]

接下来看你的代码问题：你直接用data.ranks遍历，但实际返回的是一个顶层数组，ranks是在数组的第一个对象里，所以要调整遍历的路径。另外，给你加了一些容错判断，避免数据异常时报错。

调整后的代码：

function fetch(select) {
  if ($(select).val() !== null) {
    var rank = $("#rank");
    $.getJSON('{{route("json_style_rank")}}', {id: $(select).val()}, function(data) {
      // 先清空原有选项
      $("#rank option").remove();
      
      // 容错判断：确保data是数组，且第一个元素包含ranks数组
      if (Array.isArray(data) && data[0] && Array.isArray(data[0].ranks)) {
        // 遍历ranks数组，提取id和name
        $.each(data[0].ranks, function(index, rankItem) {
          rank.append('<option value="' + rankItem.id + '">' + rankItem.name + '</option>');
        });
      }
      
      // 重置select2
      rank.select2().val(null).trigger('change');
    });
  }
}

几个关键说明：

• 必须确保后端返回合法JSON：如果JSON格式有问题，$.getJSON会直接失败，根本进不了回调函数。
• 路径修正：从data.ranks改成data[0].ranks，因为你的响应顶层是数组，ranks嵌套在第一个元素里。
• 容错处理：加了Array.isArray和存在性判断，避免后端返回空数据或结构变化时出现控制台报错。
• 变量命名：用rankItem代替this，代码可读性更高，也避免了this上下文的潜在问题。

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