javascript - jQuery getJSON 解析字典数组并填充表格

Question

我的页面中有以下 jQuery 代码:

$('#submit').click(function() {
    var $table = $('#search_body');
    $.getJSON("/search_issues/" + $("#folders").val(), function(data) {
        $.each(data, function(index, dict) {
            alert ('each index ' + index);
            $.each(obj, function(key, value){
                alert('each key ' + key + ':' + value);
                $table.innerHTML="<tr><td>" + key + ':' + value + "</td></tr>";
            });
        });
    });
});

在 HTML 标记中，我定义了一个表格，表格的主体定义为

<tbody id="search_body">
</tbody>

我把两个alert语句放在代码中，结果第一个alert只弹出一次，告诉我index是0。

但是，如果我将浏览器指向为调用 getJSON 生成的 URL，我会得到一个包含 9 个对象的数组。

这让我相信我的内部(或可能外部)循环中的语法不正确。所以，我去了一个在线 lint 表单，它说我没有语法错误，所以看起来像是逻辑错误。

顺便说一句，$('#folders') 确实有一个有效值(它是一个下拉列表并且已被选中)

谢谢

当我指向浏览器时返回的对象是这样的:

[
    {
        planning: 0,
        id: "0e1a9dba-8bfe-4316-8923-b76f76da3171",
        rank: 0,
        title: "Test Issue 4"
    },
    {
        planning: 0,
        id: "16ef48ab-1257-4fe4-a4ea-bb2a4b2757f6",
        rank: 0,
        title: "Test Issue 3"
    },
    {
        planning: 0,
        id: "4086f816-57dd-49e7-91a4-ef2ac9573555",
        rank: 0,
        title: "Test Issue 1"
    },
    {
        planning: 0,
        id: "45c598f0-fd6a-48d6-9822-1ca8b0a5af4b",
        rank: 0,
        title: "Test Issue 2"
    },
    {
        planning: 0,
        id: "50a62544-3350-4c78-a9eb-9d79a37846ea",
        rank: 0,
        title: "Test Issue 4"
    },
    {
        planning: 0,
        id: "ae7fa839-1161-4d54-92da-662e6aa35936",
        rank: 0,
        title: "Test Issue 6"
    },
    {
        planning: 0,
        id: "c4016338-a766-46ba-a651-3879a844f141",
        rank: 0,
        title: "Test creating an issue"
    },
    {
        planning: 0,
        id: "d9f38b4f-d4ef-4abf-ab30-d511c0082df1",
        rank: 0,
        title: "Test Issue 5"
    }

]

Answer 1

我正在稍微更改您的代码，假设这是所需的输出:

$('#submit').click(function() {
    var $table = $('#search_body');
    $.getJSON("/search_issues/" + $("#folders").val(), function(data) {
        $.each(data, function(index, dict) {
            var $tr = $("<tr></tr>").appendTo($table);
            $.each(dict, function(key, value){
                $tr.append("<td>" + key + ': ' + value + "</td>");
            });
        });
    });
});