Как использовать jQuery .each () для создания массива или объекта JSON - PullRequest
Новая
       12

Как использовать jQuery .each () для создания массива или объекта JSON

1 голос
/ 24 июля 2011

Я видел много примеров того, как использовать jQuery и .each () для анализа массивов json. Я хочу использовать функцию .each () для создания json. Я получаю от пользователя информацию о текстовых полях, которые будут использоваться при вызове ajax для сортировки таблицы. Я использую .each (), чтобы найти все текстовые поля, которые имеют допустимый ввод, а затем я хочу поместить эти данные в тип данных json и отправить их через ajax в SQL-запрос. Я не уверен, что мне нужен объект против массива, и из тех данных, которые я анализировал до сих пор, мой объект, похоже, не содержит всего, чего я ожидал.

Я создал глобальный объект для хранения данных, но в предыдущем посте в сети показаны скобки, когда все, что я видел для массива, это parens (), а объект - это фигурные скобки {}. Так что мой глобальный «объект» (так как я не знаю, что вызывать []) на данный момент выглядит так: 

var jsonFilter = [];

Для функции .each (), которая просматривает данные пользователя «onkeyup» для фильтрации списка: 

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

А для массива, который выводит содержимое 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 />");
        }
    }

Когда я просматриваю html в div "#jsonFilterLength", я вижу, что длина увеличивается, поэтому, похоже, она хранит дополнительные данные. Но HTML в div "#filterTest" показывает только данные для текущего текстового поля, которое я набираю, а не то, что я ожидаю, чтобы весь массив json содержал, поскольку я пытаюсь разрешить фильтрацию по нескольким текстовым вводам одновременно.

С уважением, Скотт

Ответы [ 3 ]

1 голос
/ 24 июля 2011

Кажется, работает на меня.

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

Убедитесь, что вы очистили переменную jsonFilter в функции keyup.

Вы также можете изменить код, чтобы он был короче.

Например. 

for (var i = 0; i < _jsonFilter.length; i++) {
            var obj = _jsonFilter[i];
            $("#filterTest").append("Index: " + i + ", filterBy: " + obj.filterBy + ", filterValue: " + obj.filterValue + "<br /><br />");
        }
0 голосов
/ 24 июля 2011

Во-первых, на вашем месте я бы использовал отладчик в браузере для просмотра содержимого вашего массива / объекта.Попробуйте встроенный материал в IE (с помощью клавиши F12) или firebug в Firefox, вы можете легко установить точки останова JavaScript-кода и посмотреть, что происходит.просто jsonify вашего массива / объекта за один раз в точке, где вы хотите вызвать функцию Ajax.Так что вам просто нужно сконцентрироваться на создании массива / объекта на данный момент

0 голосов
/ 24 июля 2011

Я не совсем понимаю, что именно вы делаете, но для сборки / анализа json я рекомендую вам использовать библиотеку Дугласа Крокфорда json2 .

Таким образом, вы должны создать объект Javascript для хранения данных, которые вы хотите опубликовать, а затем вызвать:

var jsonToPostToTheServer = JSON.stringify (myDataObjectToPostToTheServer);

PS В любой момент, когда вы говорите «Я добавил глобальный объект», вы делаете это неправильно.

...