Question

Cytoscape.js example shown here在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');

将返回嵌入＆lt;＆gt;中的html元素。 Javascript对象表示法（JSON）不能容纳这样的元素，也就是说它无法解析这些元素。它只能保存数组，字符串对象，布尔值，数字和null。

Answer 2

只有文字可以用JSON表示，属性名称总是双引号字符串，所以你的例子：

container: document.getElementById('cy'),

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

JSON对象可能包含以下内容：

"container-id": "cy",

您显然需要在JSON.parse之后进行后处理以检索DOM元素。

Answer 3

正如评论中所见，JSON的含义存在很大的混乱。与XML一样，JSON是一种以字符串形式编码数据的方法。这些是JavaScript代码上下文中的有效JSON：

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

在JavaScript代码中，这不是JSON：

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

第一个是整数，第二个是字符串，第三个是数组，第四个是对象。显然，文件是保存的字符串数据，因此JSON 文件不会被引号括起来，就像我们在代码中看到JSON一样。

因此，

cytoscape({
  ...
})

使用对象调用cytoscape，而不是使用JSON。如果用JSON调用它，就会这样调用它：

cytoscape('{ ... }')

JSON仅支持有限数量的类型; DOM元素不在其中。同时，您可以将任何JavaScript值填充到对象属性中：

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

执行此操作时，obj将包含sum: 3和diff: -1。类似地，当解析问题中的对象文字时，container属性将包含DOM元素。 JSON不可执行，无法调用JS函数。

如何将对HTML元素的引用添加到我的JSON中？

3 个答案: