JS convert array to json related list?

Question

I am new to JS, and the concepts of organizing data elude me a bit, trying to take data from a specific array format (since this is what I should work with) and output it to another specific JSON format.

This is data transfer to the D3 sankey module https://github.com/d3/d3-plugins/blob/master/sankey/sankey.js

I cannot figure out how to add the node index to the links, not the name.

In fact, I'm just completely lost! I made a fiddle here: https://jsfiddle.net/adamdavi3s/kw3jtzx4/

Below is an example of the data and the desired result.

var data= [ {"source":"Agricultural 'waste'","target":"Bio-conversion","value":"124.2729"}, {"source":"Bio-conversion","target":"Electricity grid","value":"0.597"}, {"source":"Bio-conversion","target":"Losses","value":"26.862"}, {"source":"Bio-conversion","target":"Liquid","value":"280.322"}, {"source":"Losses","target":"Liquid","value":"280.322"} ]; var output= { "nodes":[ {"name":"Agricultural 'waste'"}, {"name":"Bio-conversion"}, {"name":"Electricity grid"}, {"name":"Losses"}, {"name":"Liquid"} ], "links":[ {"source":0,"target":1,"value":124.729}, {"source":1,"target":2,"value":0.597}, {"source":1,"target":3,"value":26.862}, {"source":1,"target":4,"value":280.322}, {"source":3,"target":4,"value":280.322} ] }; 

Here is my fiddle code, so

 var data=[{"source":"Agricultural 'waste'","target":"Bio-conversion","value":"124.2729"}, {"source":"Bio-conversion","target":"Electricity grid","value":"0.597"}, {"source":"Bio-conversion","target":"Losses","value":"26.862"}, {"source":"Bio-conversion","target":"Liquid","value":"280.322"}, {"source":"Losses","target":"Liquid","value":"280.322"} ]; var sourceArray=[]; for (var i=0; i <data.length; i++ ) { var node= {"name":data[i].source}; var found = jQuery.inArray(node, sourceArray); if (found < 0) { // Element was not found, add it. sourceArray.push(node); } } console.log(sourceArray); 

Answer 1

Array.reduce() perfect for this use case;)

Take a look.

 var data=[{"source":"Agricultural 'waste'","target":"Bio-conversion","value":"124.2729"}, {"source":"Bio-conversion","target":"Electricity grid","value":"0.597"}, {"source":"Bio-conversion","target":"Losses","value":"26.862"}, {"source":"Bio-conversion","target":"Liquid","value":"280.322"}, {"source":"Losses","target":"Liquid","value":"280.322"} ]; var output = data.reduce(function(result, item){ for(key in search = ['source','target']) { var value = item[search[key]]; if(! result.index.hasOwnProperty(value)){ result.index[value] = Object.keys(result.index).length; result.nodes.push({name: value}); } } result.links.push({ source: result.index[item.source], target: result.index[item.target], value: Number(item.value) }); return result; }, {nodes: [], links: [], index: {}}); delete output.index; console.log(output); 

Answer 2

In javascript:

[] Annotations are used to describe the array, for example:

 var names=["John","Lisa"] 

{} It is used to describe an object.

 var person = {"name" : "John", "age" : 23} 

You can use them inside each other

  var people=[{"name" : "John", "age" : 23},{"name" : "Lisa", "age" : 44}] 

Try the following:

 var data=[{"source":"Agricultural 'waste'","target":"Bio-conversion","value":"124.2729"}, {"source":"Bio-conversion","target":"Electricity grid","value":"0.597"}, {"source":"Bio-conversion","target":"Losses","value":"26.862"}, {"source":"Bio-conversion","target":"Liquid","value":"280.322"}, {"source":"Losses","target":"Liquid","value":"280.322"} ]; var sourceArray=[]; var linkArray=[]; for (var i=0; i <data.length; i++ ) { var node= {"name":data[i].source,}; var link= { "source":i, "target":data[i].target, "value":data[i].value, }; var found = jQuery.inArray(node, sourceArray); if (found >= 0) { // Element was found, remove it. sourceArray.splice(found, 1); linkArray.splice(found, 1); } else { // Element was not found, add it. sourceArray.push(node); linkArray.push(link); } } finalArray={"nodes": sourceArray,"links": linkArray} console.log(finalArray); 

https://jsfiddle.net/9x4rdyy7/