javascript - 无法以任何方式操作 JSON 对象

Question

我正在 Cargocollective 上创建一个网站，并使用 Javascript 自定义其中的一部分(仅允许 vanilla)。我发现 Cargo 使用 JSON 符号将整个网站存储在相同的 HTML 中，在 <script type="text/json"> 中元素。

我想从那些 JSON 对象中提取信息以在我的脚本中使用。我可以使用查询选择器选择 JSON 对象。这些对象看起来像一个 JSON 对象，typeof 返回对象。

但是，如果我尝试执行类似 myObject.key 或 myObject[0].key 的操作，我会得到“undefined”。如果我尝试 JSON.parse，我会得到“位置 1 的 JSON 中的意外标记 o”。 JSON.stringify 返回 {}。

这是它在 HTML 中的样子:(它很长，4000 个字符，这只是摘录)

<script type="text/json" data-set="ScaffoldingData" >{"id":0,"title":"Sandra Javera","project_url":0,"set_id":0,"is_homepage":false,"pin":false,"is_set":true,"in_nav":false,.........},{"id":14844451,"site_id":711279,"project_url":"Lisboa-copy","direct_link":"https:\/\/sandrajavera.com\/Lisboa-copy","type":"page","title":"Lisboa copy","title_no_html":"Lisboa copy","tags":"","display":true,"pin":false,"pin_options":null,"in_nav":false,"is_homepage":false,"backdrop_enabled":false,"is_set":false,"stack":false,"excerpt":"+\n\t\t\n..........}\"</script>

因此 JSON 对象的结构如下

{
   "key": value,
   "key": value,
   "key": value
},
{
   "key": value,
   "key": value,
   "key": value
},
{
   "key": value,
   "key": value,
   "key": value
}

所以它实际上是一个对象数组，即使没有括号。

该网站是 sandrajavera.com。任何帮助表示赞赏。谢谢。

Answer 1

将文本包裹在[]中，使结构有效，然后解析。

不过，最好在源代码中添加环绕数组大括号

const str = document.querySelector('script[data-set]').textContent.trim()
const data = JSON.parse(`[${str}]`)

console.log(data)

<script type="text/json" data-set="ScaffoldingData" >
  { "id": 1,"txt": "foo"}, { "id": 2, "txt": "bar" }
</script>