JQuery - Iterating JSON Response

Question

The Story So far....

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.

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

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;
        });

    });



});

});​

My JSON file is hosted on github, but again for ease, here it is:

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

{

   "AccountNumber": [

      1000014,

      1015454,

      1000013,

      1000012,

      12

   ]

}

Also here is my Fiddler results proving my JSON object is being returned.

EDIT:

There were so queries about what i was trying to achieve, so here it goes:

1. Learn JQuery
2. 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 answer below worked for me and the JSFiddle can be found here:

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

Answer 1

Your code:

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

Says "iterate over the keys and values of the outer JSON structure, and print the keys". The first key is "AccountNumber", so you end up printing that.

What you want to do is iterate over the array stored at JSONData.AccountNumber, and print the values:

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

Answer 2

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.

But you could make it so that it retrieves the json only the first time through, using a flag.

Something like this:

$(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);
                });
            });
          });
        }
    });
});

The key thing there is I've used an inner $.each().

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.

That might look like this:

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

Answer 3

What you probably want is this:

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