JQuery - 迭代 JSON 响应

Question

到目前为止的故事......

尝试学习 JS 和 JQuery，我想我会从基础开始并尝试 AJAX “输入时搜索” 魔法。首先，我只想正确处理 AJAX 部分并遍历返回的 JSON 对象并将其附加到无序列表中。我此时没有对输入的值与返回的 JSON 结果进行验证，我只想要一种受控的 when 方式来执行 AJAX getJSON 调用。稍后我会在我做对后进行验证。

无论如何，我都无法在 ul 中显示帐号。目前唯一显示的是 li 中的 AccountNumber 而不是我的 ACCOUNT NUMBERS

我的 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) {
        $('<ul>').attr({
            id: "live-list"
        }).appendTo('div#livesearchesults');
        $.each(JSONData, function(i, item) {
            var li = $('<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 结果证明我的 JSON 对象正在被返回。

编辑：

关于我想要达到的目标有很多疑问，所以就这样吧：

1. 学习 jQuery
2. 构建“输入时搜索”输入框。首先，我想首先正确处理 AJAX 部分，然后我将构建一个利用此功能的 MVC3 (ASP.NET) 应用程序，并整理 JQuery 代码，其中包括对输入与返回的 JSON 的验证。李>

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

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

Answer 1

首先，我认为 keydown 可能是进行 json 调用的错误时间，或者至少......使用 every keydown 进行 json 调用是错误的。这电话太多了。如果我在输入框中输入“hello”，大约 0.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 =
            $('<ul>')
                .attr({id: "live-list"})
                .appendTo('div#livesearchesults');
            $.each(JSONData, function(i, item) {
                $.each(item, function(j, val) {
                  $('<li>').append(val).appendTo($ul);
                });
            });
          });
        }
    });
});

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

外部的$.each() 可能是不必要的。您收到的 JSON 在对象中只有一个元素 - “AccountNumber”，它是一个数组。所以你不需要遍历对象中的所有项目。

可能看起来像这样：

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

Answer 2

你可能想要的是这个：

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

Answer 3

您的代码：

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

说“遍历外部 JSON 结构的键和值，并打印键”。第一个键是“AccountNumber”，因此您最终会打印它。

您要做的是遍历存储在JSONData.AccountNumber 的数组，然后打印值：

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