JQuery – 迭代JSON响应

到目前为止的故事….

尝试学习JS和JQuery，我想我会从基础知识开始，尝试一下AJAX “搜索你输入”的魔力。 首先，我只想让AJAX部分正确并迭代返回JSON对象并将其附加到无序列表。 我此时没有对输入的值与返回的JSON结果进行validation，我只想要一种何时进行AJAX getJSON调用的受控方式。 一旦我做对了，我将进行validation。

无论如何我无法在ul中显示帐号。 目前显示的唯一内容是li中的AccountNumber而不是我的帐户号码

我的JS代码在这里：

http://jsfiddle.net/garfbradaz/HBYvq/54/

但为了方便它在这里：

$(document).ready(function() { $("#livesearchinput").keydown(function(key) { $.ajaxSetup({ cache: false }); $.getJSON(" /gh/get/response.json//garfbradaz/MvcLiveSearch/tree/master/JSFiddleAjaxReponses/", function(JSONData) { $('
').attr({ id: "live-list" }).appendTo('div#livesearchesults'); $.each(JSONData, function(i, item) { var li = $('
').append(i).appendTo('ul#live-list'); //debugger; }); }); }); 

}）;

我的JSON文件托管在github上，但为了方便起见，这里是：

https://github.com/garfbradaz/MvcLiveSearch/blob/master/JSFiddleAjaxReponses/demo.response.json

 { "AccountNumber": [ 1000014, 1015454, 1000013, 1000012, 12 ] } 

这里还有我的Fiddler结果certificate我的JSON对象正在返回。

编辑：

对于我想要实现的目标有如此疑问，所以这里有：

1. 学习JQuery
2. 构建“在键入时搜索”输入框。 首先，我想首先获得AJAX部分，然后我将构建一个利用此function的MVC3（ASP.NET）应用程序，并整理JQuery代码，其中包括输入与返回的JSON的validation。

下面的Cheesos回答对我有用，JSFiddle可以在这里找到：

http://jsfiddle.net/garfbradaz/JYdTU/

Answer 1

首先，我认为keydown可能是执行json调用的错误时间，或者至少……对每个 keydown执行json调用是错误的。 那个电话太多了。 如果我在输入框中键入“hello”，大约.8秒内，则有5个json请求和响应。

但你可以这样做，以便它只在第一次使用标志时检索json。

像这样的东西：

 $(document).ready(function() { var $input = $("#livesearchinput"), filled = false; $.ajaxSetup({ cache: false }); $input.keydown(function(key) { if (!filled) { filled = true; $.getJSON("json101.js", function(JSONData) { var $ul = $('
') .attr({id: "live-list"}) .appendTo('div#livesearchesults'); $.each(JSONData, function(i, item) { $.each(item, function(j, val) { $('
').append(val).appendTo($ul); }); }); }); } }); }); 

关键是我使用了内部$.each() 。

外部$.each()可能是不必要的。 您收到的JSON中只有一个元素 – “AccountNumber”，它是一个数组。 因此，您无需迭代对象中的所有项目。

这可能看起来像这样：

  $.each(JSONData.AccountNumber, function(i, item) { $('
').append(item).appendTo($ul); }); 

Answer 2

你可能想要的是这个：

  $.each(JSONData.AccountNumber, function(i, item) { var li = $('
').append(item).appendTo('ul#live-list'); }); 

Answer 3

你的代码：

 $.each(JSONData, function(i, item) { var li = $('
').append(i).appendTo('ul#live-list'); }); 

说“迭代外部JSON结构的键和值，并打印键”。 第一个键是“AccountNumber”，所以你最终打印出来。

你想要做的是遍历存储在JSONData.AccountNumber的数组，并打印值：

 $.each(JSONData.AccountNumber, function() { var li = $('
').append(this).appendTo('ul#live-list'); });