Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JS converting an array to a json linked list?

I am new to JS and the concepts of organising data elude me a little, trying to take data from a specific array format (as this is what I have to work with) and output it into another specific JSON format.

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

I can't figure out is how to add the index of the node into the links, rather than the name.

Really I am just totally lost with it! I made a fiddle here: https://jsfiddle.net/adamdavi3s/kw3jtzx4/

Below is an example of the data and the output required

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 code from the fiddle thusfar

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);
like image 449
Adam Davies Avatar asked Oct 06 '16 13:10

Adam Davies


People also ask

How do I convert an array to JSON?

Stringify a JavaScript Array const arr = ["John", "Peter", "Sally", "Jane"]; Use the JavaScript function JSON.stringify() to convert it into a string. const myJSON = JSON.stringify(arr); The result will be a string following the JSON notation.

What is JSON Stringify?

The JSON.stringify() method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.

How do you write an array of objects in JSON?

A JSON array contains zero, one, or more ordered elements, separated by a comma. The JSON array is surrounded by square brackets [ ] . A JSON array is zero terminated, the first index of the array is zero (0). Therefore, the last index of the array is length - 1.


2 Answers

In javascript:

[ ] annotations are used to describe an Array, like:

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

{ } Its are used to describe an Object

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

You can use them inside one another

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

Try this:

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/

like image 167
Ernesto Mayoral Cabezas Avatar answered Sep 22 '22 19:09

Ernesto Mayoral Cabezas


Array.reduce() is 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);
like image 34
Steeve Pitis Avatar answered Sep 23 '22 19:09

Steeve Pitis