JQuery的 - 迭代JSON响应 [英] JQuery - Iterating JSON Response
问题描述
迄今为止的故事......
努力学习JS和jQuery，我想我会从基础开始，并尝试小有一点AJAX的键入时搜索的法宝。首先，我只是想获得AJAX的部分权利，并通过回JSON对象进行迭代，并追加到一个无序列表。林做的输入值与返回的JSON结果此时没有验证，我只是想以可控的方式在做AJAX的getJSON调用。以后我会做验证，一旦我得到这个权利。
Trying to learn JS and JQuery and i thought i would start with the basics and try alittle AJAX "search as you type" magic. Firstly i just wanted to get the AJAX part right and iterating through the return JSON object and appending it to a unordered list. Im doing no validation on the inputted value vs. the returned JSON results at this time, i just want a controlled way of when to do the AJAX getJSON call. Later i will do the validation once i get this right.
反正即时通讯有问题在UL显示帐号。目前正在显示的仅仅是账户号码在里，而不是我的帐号
Anyways im having trouble displaying the Account Numbers in in the ul. At the moment the only thing that is being displayed is AccountNumber in the li and not my ACCOUNT NUMBERS
我的JS code是在这里：
My JS Code is here:
http://jsfiddle.net/garfbradaz/HBYvq/54/
但对于缓解其在这里也：
but for ease its here as well:
$(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上，但同样为了方便，在这里它是：
My JSON file is hosted on github, but again for ease, here it is:
<一个href="https://github.com/garfbradaz/MvcLiveSearch/blob/master/JSFiddleAjaxReponses/demo.response.json" rel="nofollow">https://github.com/garfbradaz/MvcLiveSearch/blob/master/JSFiddleAjaxReponses/demo.response.json
{
"AccountNumber": [
1000014,
1015454,
1000013,
1000012,
12
]
}
另外这里是我的提琴手结果证明我的JSON对象被返回。
Also here is my Fiddler results proving my JSON object is being returned.
编辑：
有什么我试图达到这样的查询，所以这里有云：
There were so queries about what i was trying to achieve, so here it goes:
- 学习jQuery
- 要建立搜索你输入输入框。首先，我想获得的AJAX部分右第一，然后我要建立一个MVC3（ASP.NET）应用程序，利用此功能，再加上收拾一下JQuery的code，其中包括验证输入与返回的JSON
- Learn JQuery
- To build a "Search as you Type" input box. Firstly i wanted to get the AJAX part right first, then i was going to build an MVC3 (ASP.NET) Application that utilises this functionality, plus tidy up the JQuery code which includes validation for the input vs. the returned JSON.
Cheesos回答以下工作对我来说和的jsfiddle可以在这里找到：
Cheesos answer below worked for me and the JSFiddle can be found here:
http://jsfiddle.net/garfbradaz/JYdTU/
推荐答案
首先，我想的keydown可能是在错误的时间做了JSON的呼叫，或者至少......这是错误做一个JSON调用同的每的KEYDOWN。这是太多调用。如果我输入你好，在输入框中，约0.8秒内，则有5 JSON请求和响应。
First, I think keydown is probably the wrong time to do the json call, or at least... it's wrong to do a json call with every keydown. That's too many calls. If I type "hello" in the input box, within about .8 seconds, then there are 5 json requests and responses.
但是你可以让这个只在第一时间通过检索JSON，使用标志。
But you could make it so that it retrieves the json only the first time through, using a flag.
事情是这样的：
$(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);
});
});
});
}
});
});
最关键的事情有我所使用的内部 $。每（）。
外 $。每（）可能是不必要的。收到的JSON有在物体的恰好一个要素 - 账户号码，这是一个数组。所以你并不需要遍历对象中的所有项目。
The outer $.each() is probably unnecessary. The JSON you receive has exactly one element in the object - "AccountNumber", which is an array. So you don't need to iterate over all the items in the object.
这可能是这样的：
$.each(JSONData.AccountNumber, function(i, item) {
$('<li>').append(item).appendTo($ul);
});
这篇关于JQuery的 - 迭代JSON响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
