有效的 JSON，但不能显示数组的元素

Question

我已经为此工作了很长一段时间，并且我已经阅读了 TONS 关于 SO 的帖子，试图弄清楚我需要如何做到这一点，我似乎无法让它工作。我认为这一定是我编码事物的方式的某些方面。所以投反对票，但希望有好心人能帮助我。

我已经使用 jsonlint 进行了测试，它返回有效。我从服务器收到了带有值的响应，除了警报（响应）；之外，我似乎无法在浏览器中得到任何东西。我需要能够分别访问“cat_id_PK”和其他元素的值以循环并在 html 表格单元格中显示它们。

JSON：

{
"income": [
    {
        "cat_id_PK": 14,
        "cat_name": "test1",
        "cat_amount": "100.00"
    },
    {
        "cat_id_PK": 15,
        "cat_name": "test2",
        "cat_amount": "200.00"
    },
    {
        "cat_id_PK": 34,
        "cat_name": "test3",
        "cat_amount": "300.00"
    },
"expense": [
    {
        "cat_id_PK": 14,
        "cat_name": "tes41",
        "cat_amount": "400.00"
    },
    {
        "cat_id_PK": 15,
        "cat_name": "test5",
        "cat_amount": "500.00"
    },
    {
        "cat_id_PK": 34,
        "cat_name": "test6",
        "cat_amount": "600.00"
    }
]
}

PHP

    $array = array(
        'income'    => $income,
        'expense'   => $expense,
        'recurring' => $recurring
    );

    echo json_encode($array);

JQUERY

var request = $.ajax({
    type: "POST",
    url: 'inc/functions.php',
dataType: "JSON",
    data: {action: "display_categories", cur_month:cur_month}
});
request.done(function(response){
     //for each element put values in <td></td> tags.
});

Answer 1

“我已经使用 jsonlint 进行了测试，返回有效。”

不，它没有，不是因为您显示的 JSON 有错误：它在 } 之后和 "expense" : ... 之前的行上的逗号之前缺少结束 ]。但也许这只是您问题中的一个错字，因为您正在使用 json_encode() 生成 JSON（不会产生这样的错误）。

" 除了alert(response);"

所以你当时得到了某种价值。

" 但如果我只是提醒response[0]，它将只返回 JSON 数组的第一个字符。"

是的，那是因为 response 是一个字符串 - 包含 JSON 的原始字符串，您想要解析该字符串以获取一个对象。除了您不必手动执行此操作，因为一旦您将dataType:"json" 添加到您的$.ajax() 选项，jQuery 就会自动执行此操作。

“我实际上错过了这个数据类型，但即使在添加它之后，无论我尝试什么，我都会得到[Object:Object] 或未定义。我实际上只是在做@987654331 @"

添加dataType:"json" 后，response 参数将成为一个对象，当您尝试发出警报时，该对象将正确显示为[object Object]。如果您使用console.log(response)，那么在浏览器的控制台中您会看到实际的对象。如果您尝试访问不存在的属性，您会得到undefined。

“我需要能够分别访问 cat_id_PK 和其他元素的值，以循环并在 html 表格单元格中显示它们。”

您的response 对象有两个属性，income 和expenses，它们都是对象数组。所以使用response.income 访问第一个对象数组，使用response.expenses 访问第二个对象数组。第一项收入是response.income[0]，你问的财产是response.income[0].cat_id_PK。所以你可以使用for 循环，或者使用$.each() 来遍历数组并对每个.cat_id_PK 属性做一些事情：

var request = $.ajax({
    type: "POST",
    url: 'inc/functions.php',
    dataType: "json",
    data: {action: "display_categories", cur_month:cur_month}
});
request.done(function(response){
  //for each element put values in <td></td> tags.
  var tr = $("<tr></tr>");
  // using traditional for loop for income items
  for(var i = 0; i < response.income.length; i++) {
    $("<td></td>").text(response.income[i].cat_id_PK).appendTo(tr);
  }
  tr.appendTo("#idOfTableHere");
  var tr = $("<tr></tr>");
  // use equivalent jQuery $.each for expense items
  $.each(response.expenses, function(i, v) {
    $("<td></td>").text(v.cat_id_PK).appendTo(tr);
  });
  tr.appendTo("#idOfTableHere");
});

我展示的代码在每个循环中创建新的 td 元素，将它们附加到新的表格行，然后在每个循环之后，将新行附加到我假设您的页面上已经存在 @987654349 的表格中@。