Looping nodes in with cytoscape.js

Question

I am currently trying to do looping for a graph by using cytoscape.js The problem is I don't quite get how to do it since there are some repeating nodes.

I have these data like this :

Sheraton Cherry, Rosaceae, Dentate, Pinnate
Pineapple Guava, Myrtaceae, Entire, Pinnate
Chinese Sumac, Rosaceae, Entire, Pinnate

And as you can see some data is repeating.

So far this is what I got :

  elements: {
nodes: [
  { data: { id: 'a', name: 'Sheraton Cherry' } },
  { data:  { id: 'a1', name: 'Rosacea'}},
  { data: { id: 'a2', name: 'Dentate' } },
  { data: { id: 'a3', name: 'Pinnate' } },
  { data: { id: 'b', name: 'Pineapple Guava' } },
  { data:  { id: 'b1', name: 'Myrtaceae'}},
  { data: { id: 'b2', name: 'Entire' } },
  { data: { id: 'a3', name: 'Pinnate' } }

],
edges: [
  { data: { source: 'a1', target: 'a' }},
  { data: { source: 'a2', target: 'a' }},
  { data: { source: 'a3', target: 'a' }},
  { data: { source: 'b1', target: 'b'}},
  { data: { source: 'b2', target: 'b'}},
  { data: { source: 'a3', target: 'b'}}
]

},

I typed it manually in which the graph came out perfectly but since this is only some of the data and I have 10 more of it, I should loop the nodes and edges.

But how can I do it?

Found something like this :

 var demoNodes = []; var demoEdges = []; demoNodes.push({ data: { id: b[0], name:b[0] } }); for (var i = 0; i < a.length; i++) { demoNodes.push({ data: { id: a[i], name:a[i] } }); } for (var i = 0; i < a.length; i++) { demoEdges.push({ data: { source: b[0], target: a[i] } }) } 

but still it's not working.

Answer 1

Parse your input data and convert it to the elements JSON format .

If your data is just comma separated, use .split() and .trim() on the input string. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

Cytoscape does not allow elements with duplicate IDs, but it would be better in principle if you disallow duplicates as you parse (or with another pass post parsing).