如何在JSON中添加對HTML元素的引用？

Question

此處顯示的Cytoscape.js示例在JSON中具有此參考：

 container: document.getElementById('cy'),

例如。

cytoscape({

  container: document.getElementById('cy'),

  elements: [
    { // node n1
      //... snip
    }]
});

如果我手動創建該JSON字符串，然后在其上調用cytoscape（），那么它將正常工作。

但是，我已經從servlet返回了JSON字符串，並且在客戶端，我需要添加容器值。

我試過了：

function updateGraph(json) {
    console.log(json);

    pjson = JSON.parse(json);
    pjson["container"] =  document.getElementById('graph-container');
    json = JSON.stringify(pjson);
    console.log(json);

    cytoscape(json);
}

但這會將容器元素顯示為：

"container":{}

添加HTML元素引用的正確方法是什么？

Answer 1

document.getElementById('graph-container');

將返回嵌入在<>中的html元素。 Javascript對象符號（JSON）無法容納此類元素，即無法解析此類元素。 它只能容納數組，字符串對象，布爾值，數字和null。

Answer 2

只有文字可以用JSON表示，屬性名稱始終是雙引號字符串，因此您的示例是：

container: document.getElementById('cy'),

不是有效的JSON對象的一部分。

JSON對象可以包含以下內容：

"container-id": "cy",

顯然，您需要在JSON.parse之后進行后處理才能檢索DOM元素。

Answer 3

從評論中可以看出，對於什么是JSON有很大的困惑。 JSON和XML一樣，是一種以字符串形式編碼數據的方式。 這些是JavaScript代碼上下文中的有效JSON：

'1'
'"quux"'
'[2, 3, 4]'
'{ "foo": ["bar", "baz"] }'

在JavaScript代碼中，這不是JSON：

1
"quux"
[2, 3, 4]
{ "foo": ["bar", "baz"] }

第一個是整數，第二個是字符串，第三個是數組，第四個是對象。 顯然，文件是保存的字符串數據，因此JSON 文件不會被引號引起來，就像在代碼中看到JSON一樣。

從而，

cytoscape({
  ...
})

使用對象而不是JSON調用cytoscape 。 如果要用JSON調用它，它將像這樣調用它：

cytoscape('{ ... }')

JSON僅支持有限數量的類型； DOM元素不在其中。 同時，您可以將任何JavaScript值填充到object屬性中：

var obj = {
  sum: 1 + 2,
  diff: 1 - 2
};

執行此操作時， obj將包含sum: 3和diff: -1 。 同樣，當解析問題中的對象文字時， container屬性將包含一個DOM元素。 不能執行的JSON無法調用JS函數。