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

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 =
            $('
')
                .attr({id: "live-list"})
                .appendTo('div#livesearchesults');
            $.each(JSONData, function(i, item) {
                $.each(item, function(j, val) {
                  $('
').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) {
                $('
').append(item).appendTo($ul);
            });