Question

I’ve seen a lot of examples that site how to use jQuery and .each() to parse json arrays. What I want to do is use the .each() function to create the json. I’m getting input from the user regarding text boxes that will be used in an ajax call to sort a table. I am using .each() to find all text boxes that have valid input, and then I want to put that data into a json data type and send it via ajax to an SQL query. I’m not certain if I want an object vs. an array, and from what data I’ve parsed thus far, my object doesn’t seem to contain everything I’d expect.

I’ve created a global object to store the data, but a previous post on the web shows brackets, when everything I’ve seen for an array is parens ( ), and an object is curly braces { }. So my global ‘object’ (since I don’t know what to call [ ]) at this point looks like this:

var jsonFilter = [];

For the .each() function, that looks at user data ‘onkeyup’ to filter the list:

$("input:text[id^='filter']").live({
        focusin: function () {
            currentFilter = $(this).val();
            $(this).removeClass("filter");
            $(this).val("");
        },

        focusout: function () {
            if ($(this).val() == "") {
                // If they gave up focus and didn't type anything in the box, restore the text
                $(this).addClass("filter");
                $(this).val(currentFilter);
            }
        },

        keyup: function () {
            $("input:text[id^='filter']").each(function () {
                if ($(this).val() != "" && !$(this).hasClass('filter')) {
                    //alert("filterBy: " + $(this).attr('id') + "\nfilterValue: " + $(this).val());
                    jsonFilter.push({ filterBy: $(this).attr('id'), filterValue: $(this).val() });
                }
            });
            //alert("Done with .each()");
            filterReport(jsonFilter);
        }
    });

And for the array that is outputting the content of the jsonFilter:

function filterReport(_jsonFilter) {
        $("#jsonFilterLength").html(_jsonFilter.length);
        //$("#filterTest").html("");
        for (var i = 0; i < _jsonFilter.length; i++) {
            $("#filterTest").append("Index: " + i + ", filterBy: " + _jsonFilter[i]["filterBy"] + ", filterValue: " + _jsonFilter[i]["filterValue"] + "<br /><br />");
        }
    }

When I view the html in the div “#jsonFilterLength”, is see that the length is increasing, so it appears to be storing additional data. But the html in the div “#filterTest” only shows the data for the current text box I’m typing in, not what I would expect the entire json array to contain as I am trying to allow filtering on multiple text inputs simultaneously.

Regards,
Scott

Answer 1

Seems to be working for me.

http://jsfiddle.net/WQjsN/2/

Make sure you clear the jsonFilter variable on keyup function.

You can also modify the code so that it’s shorter.

Eg.

for (var i = 0; i < _jsonFilter.length; i++) {
            var obj = _jsonFilter[i];
            $("#filterTest").append("Index: " + i + ", filterBy: " + obj.filterBy + ", filterValue: " + obj.filterValue + "<br /><br />");
        }