从脚本标记使用它们时，Json键未定义

Question

我一直在尝试使用Ajax GET请求加载某些Json然后解析它。

但是，当尝试从HTML脚本标记访问Json密钥时，它未定义。

为了调试这个问题，我在控制台中记录了Json的所有键以及Json本身。因此我使用了这个功能：

function getInv() {
    $.get( "/inventory/", function( data ) {
      var invList = data.split(",, "); // Explanation is below
      console.log(invList[0]) // Just testing with first object
      console.log(Object.keys(invList[0]));
    });
}
getInv();

目的 data.split（“,,”）：

由于我的后端脚本使用不同的编程语言，我不得不将其解释为适合Javascript的脚本。 还有多个Json对象，所以我用",, "将它们分开，然后在Javascript中拆分它们以创建一个Json对象列表。

调用该函数后，出现以下输出：

虽然有趣的部分是在控制台中粘贴Json对象之后：

这是输出：

所以基本上，在脚本标签中，我无法访问对象的密钥，虽然一旦我在控制台中手动使用它，就可以访问所有密钥。

这背后的目的是什么？给出不同的输出似乎很奇怪。也许invList[0]在脚本标记中根本不是Json对象？谢谢！

Answer 1

data.split()返回一个字符串数组，而不是对象。您需要使用JSON.parse()将JSON字符串解析为相应的对象。

function getInv() {
    $.get( "/inventory/", function( data ) {
      var invList = data.split(",, "); 
      console.log(invList[0]) // Just testing with first object
      var obj = JSON.parse(invList[0]);
      console.log(Object.keys(obj));
    });
}

您可以使用.map()来解析所有这些对象，然后您将得到一个像您期望的对象数组：

var invList = data.split(",, ").map(JSON.parse);