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\" magi

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

What you probably want is this:

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

Answer 3

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