Cytsocape.js can't create edges in for loop

Question

I'm creating chart with nodes and edges. Once I created nodes, I can't create the associated edges without getting those kind of errors :

Can not create edge 5134fb65-b30f-4947-9870-cc909e293e21 with nonexistant source Peter

My code :

var myJSONdata = info;
var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [
    {
      selector: 'node',
      style: {
        'content': 'data(id)',
        'text-opacity': 0.5,
        'text-valign': 'center',
        'text-halign': 'right',
        'shape': 'hexagon',
        'label': 'data(label)',
        'background-color': '#11479e'
      }
    },
    {
      selector: 'edge',
      style: {
        'curve-style': 'bezier',
        'width': 4,
        'target-arrow-shape': 'triangle',
        'line-color': '#9dbaea',
        'target-arrow-color': '#9dbaea'
      }
    }
  ],

  // elements: {
  //   nodes: [
  //     { data: { id: 'Peter' } },
  //     { data: { id: 'Claire' } },
  //     { data: { id: 'Mike' } },
  //     { data: { id: 'Rosa' } }
  //   ],
  //   edges: [
  //     { data: { source: 'Peter', target: 'Claire' } },
  //     { data: { source: 'Claire', target: 'Mike' } },
  //     { data: { source: 'Mike', target: 'Rosa' } }
  //   ]
  // }
});

var array = [];
// Create nodes
for (var i = 0; i <= myJSONdata.length - 1; i++) {
  array.push({
        group: 'nodes',
        data: { 
          id: i,
          label: myJSONdata[i].name
        }
      }
  );
}
// Create edges
for (var i = 0; i <= myJSONdata.length - 1; i++) {
  var source = myJSONdata[i].name;
  array.push({
      group: 'edges',
      data: {
          source: source,
          target: myJSONdata[i].next_op_name
      }
  });
}

cy.add(array);

cy.layout({
    name: 'circle'
}).run();

The "Create nodes" part is working, but the "Create edges" is not.

I tried the solution here but it does not work.

Actually I want to read data from JSON file to create the chart. I can do it with :

 elements: {
    nodes: [
      { data: { id: 'Peter' } },
      { data: { id: 'Claire' } },
      { data: { id: 'Mike' } },
      { data: { id: 'Rosa' } }
    ],
    edges: [
      { data: { source: 'Peter', target: 'Claire' } },
      { data: { source: 'Claire', target: 'Mike' } },
      { data: { source: 'Mike', target: 'Rosa' } }
    ]
  }

But I want to automate it according to the JSON file in input.

This is my JSON file :

info = [
    {
        "name": "Peter",
        "next_op_name": "Claire",
    }, {
        "name": "Claire",
        "next_op_name": "Mike",
    }, {
        "name": "Mike",
        "next_op_name": "Rosa",
    }, {
        "name": "Rosa",
        "next_op_name": "Peter",
    }
];

I can't understand what is wrong.

Answer 1

The source and target fields in the edge are the IDs of nodes, not labels.

When you create the nodes, you need to set id to myJSONdata[i].name as well.