Question

我正在构建一个应用程序，它需要一个json数据文件才能进一步绘制内容。我正在尝试将用户输入到此表单中：

{
  "nodes": [
    {
      "id": "n0",
      "label": "A node",
      "x": 0,
      "y": 0,
      "size": 3
    },
    {
      "id": "n1",
      "label": "Another node",
      "x": 3,
      "y": 1,
      "size": 2
    },
    {
      "id": "n2",
      "label": "And a last one",
      "x": 1,
      "y": 3,
      "size": 1
    }
  ],
  "edges": [
    {
      "id": "e0",
      "source": "n0",
      "target": "n1"
    },
    {
      "id": "e1",
      "source": "n1",
      "target": "n2"
    },
    {
      "id": "e2",
      "source": "n2",
      "target": "n0"
    }
  ]
}

用户将输入一个文本区域中的节点和第二个文本区域中的边缘，并从该数据中绘制图形。

我要做的是编写一个函数，它将这两个逗号分隔的数组转换为json格式，可以进一步处理。这有意义吗？有没有其他选择，我可能错过了？

感谢您的帮助。

Answer 1

认为我几乎完全得到了你想要的东西 - 我非常无聊所以我基本上都是为你写的。这是我的fiddle。

以下是代码：

$("#nodes").text("n0,A node,0,0,3");
$("#edges").text("e0,n0,n1");

var graph = {
    "nodes": [],
    "edges": []
}

$("#graph").submit(function(event){
    event.preventDefault();

    var nodeArr = $(this).serializeArray()[0].value.split(",");
    var nodeObj = {
        id: nodeArr[0],
        label: nodeArr[1],
        x: nodeArr[2],
        y: nodeArr[3],
        size: nodeArr[4]
    }
    graph.nodes.push(nodeObj);

    var edgeArr = $(this).serializeArray()[1].value.split(",");
    var edgeObj = {
        id: edgeArr[0],
        source: edgeArr[1],
        target: edgeArr[2]
    }
    graph.edges.push(edgeObj);

    console.log(JSON.stringify(graph, null, '\t'));

});

从用户输入生成json数据（textarea）

1 个答案: