在jQuery $.each循环中获取并展示JSON的name字段值

我在使用jQuery的$.each循环时遇到了问题，没法正确获取到JSON里的游戏名称。触发逻辑是用户在输入框停止输入时调用suggestit()函数，这个函数应该从接口拉取JSON数据并展示所有游戏信息，但现在循环里拿不到正确的name值。

我的代码如下：

function suggestit() { 
  var value = $input.val(); 
  $.getJSON( "ajax.php?search=" + value + "?suggested_size=5&mode=game", function( data ) { 
    $.each(result, function(i, field){ 
      $("#results").append("<p>" + field + "</p>"); 
    }); 
  }); 
}

返回的JSON结构大概是这样的（简化后）：

["data"]=> 
  ["attributes"]=> // 省略部分内容
["included"]=> 
  [0]=> 
    ["name"]=> string(31) "Grand Theft Auto: San Andreas®" 
  [1]=> 
    ["name"]=> string(31) "Grand Theft Auto V"

我希望在$.each循环的field里拿到JSON中的name字段值，该怎么调整代码呢？

别急，我帮你梳理下问题所在，然后一步步调整代码：

首先，你的代码里有两个很容易忽略的小问题：

1. 接口URL参数拼接错误：你用了两个?来分隔参数，正确的做法是第一个参数用?，后续参数都用&连接，不然suggested_size和mode这两个参数根本不会被接口正确识别，可能返回错误或者不完整的数据。
2. 遍历的变量名不匹配：$.each里写的是遍历result，但你的getJSON回调函数接收的参数是data，这个result变量根本不存在，肯定拿不到任何数据！

然后，再看你提供的JSON结构，游戏名称都存在data.included这个数组里的每个元素的name字段，所以我们需要遍历这个数组。

调整后的完整代码如下：

function suggestit() { 
  var value = $input.val(); 
  // 修正URL参数：把第二个?替换成&
  $.getJSON( "ajax.php?search=" + value + "&suggested_size=5&mode=game", function( data ) { 
    // 先清空结果容器，避免多次查询后内容叠加
    $("#results").empty();
    // 遍历data.included数组，每个元素赋值给item
    $.each(data.included, function(i, item){ 
      // 取出item的name字段插入到页面
      $("#results").append("<p>" + item.name + "</p>"); 
    }); 
  }); 
}

另外给你加了个小优化：每次发起新查询前先清空#results容器，不然用户多次输入搜索关键词后，旧的结果会一直堆积在页面上，体验不太好。

如果调整后还是有问题，建议在回调函数里加一句console.log(data)，打开浏览器的开发者工具控制台，看看接口返回的data实际结构是什么样的，这样能更直观地排查问题哦。

内容的提问来源于stack exchange，提问作者J. Doe