如何使用 jQuery .each() 创建 JSON 数组或对象

Question

我看过很多关于如何使用 jQuery 和 .each() 解析 json 数组的示例。我想做的是使用 .each() 函数创建 json。我正在从用户那里获取有关文本框的输入，这些文本框将在 ajax 调用中用于对表进行排序。我使用 .each() 查找所有具有有效输入的文本框，然后我想将该数据放入 json 数据类型并通过 ajax 将其发送到 SQL 查询。我不确定我是否想要一个对象还是一个数组，并且从迄今为止我解析的数据来看，我的对象似乎并不包含我期望的所有内容。

我创建了一个全局对象来存储数据，但是网上的一篇文章显示了括号，当时我看到的数组的所有内容都是括号 ( )，而对象是大括号 { }。所以我的全局“对象”（因为我不知道该调用什么[]）此时看起来像这样：

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

当我查看 div“#jsonFilterLength”中的 html 时，发现长度在增加，因此它似乎正在存储附加数据。但是 div“#filterTest”中的 html 仅显示我正在输入的当前文本框的数据，而不是我期望整个 json 数组包含的数据，因为我试图允许同时过滤多个文本输入。

问候， 斯科特

Answer 1

似乎为我工作。

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

确保清除 keyup 函数上的 jsonFilter 变量。

您还可以修改代码以使其更短。

例如。

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

Answer 2

我不太明白你在做什么，但要构建/解析 json，我建议你使用 Douglas Crockford 的 json2 库。

所以基本上你会构建一个 Javascript 对象来存储你想要发布的数据，然后调用：

var jsonToPostToTheServer = JSON.stringify(myDataObjectToPostToTheServer);

PS，任何时候你说“我添加了一个全局对象”，你都做错了。

Answer 3

首先，如果我是你，我会使用浏览器内调试器来查看数组/对象的内容。尝试 IE 中的内置功能（通过 F12 键）或 Firefox 中的 firebug，您可以轻松设置 JavaScript 代码的断点并查看发生了什么。

至于你的 json 内容，你应该能够在你想要调用 Ajax 函数时一次性 jsonify 你的数组/对象。所以你现在只需要集中精力构建数组/对象