Convert json string with duplicate keys into javascript array - javascript

I feel like this should be simple but I can't get my head around it. I'm trying to use Google Charts to display some simple data, I've got this data in a json string in a format like.
var json1 = [{"email":"abc#xyz","noOfOrders":"223"},{"email":"bcd#xyz.com","noOfOrders":"12"},{"email":"cde#xyz.com","noOfOrders":"132"}]
and I'm trying to get that into Google charts which has to be formatted as such.
var data = google.visualization.arrayToDataTable([
['Customer', 'Number of Orders'],
['abc#xyz.com', 223],
['bcd#xyz.com', 12],
['cde#xyz.com', 123]
]);
I'm trying to achieve with this javascript.

You could iterate through the JSON data and build the array needed for the chart.
var json = JSON.parse( [{...}] ); //parse the json string first, converting it to an array
var opts = [['Customer', 'Number of Orders']]; //add the headers now
for (var i = 0; i < json.length; i++) {
opts[] = [ json[i].email, json[i].noOfOrders ];
}
var data = google.visualization.arrayToDataTable( data );

Related

JSON to JS array

JSON:
[{"CDATE":"0000-00-00","DISTANCE":"0"},
{"CDATE":"0000-00-00","DISTANCE":"1"},
{"CDATE":"0000-00-00","DISTANCE":"2"},
{"CDATE":"0000-00-00","DISTANCE":"3"}]
Is it possible to put all the distance value in their own array in JS? The formatting will be consistent as it comes from an API and is always formatted correctly.
What I've tried:
var arry = [ /* JSON noted above */ ];
alert(arry[1])
and
var arry = JSON.parse([ /* JSON noted above */ ]);
alert(arry[1])
Expected:
1
Actual:
{"CDATE":"0000-00-00","DISTANCE":"1"}
and the other gives an error.
I would like to extract just the DISTANCE value as an array of DISTANCE
I've tried JSON.parse() but I don't think this is what I am after as it hasn't worked for me.
Use .map
var data = [{"CDATE":"0000-00-00","DISTANCE":"0"},
{"CDATE":"0000-00-00","DISTANCE":"1"},
{"CDATE":"0000-00-00","DISTANCE":"2"},
{"CDATE":"0000-00-00","DISTANCE":"3"}];
var distance = data.map(el => el.DISTANCE);
console.log(distance[2]);
console.log(distance);
It is already a valid json so you do not need to use JSON.parse()

how to create multidimensional array in javascript

In my project i am using highcart for that i should give the input in below format.
Here is my sample data:
[{"A",23},{"B",24},{"C",25},{"D",26},{"E",27}]
I have to convert the above json array to below format.
data=[["A",23],["B",24],["C",25],["D",26],["E",27]]
How to iterate my sample data and convert the above format.
Any help will be greatly appreciated!!!
[{"A",23},{"B",24},{"C",25},{"D",26},{"E",27}] is wrong,
it should be like [{"A":23},{"B":24},{"C":25},{"D":26},{"E":27}];
var data = [{"A":23},{"B":24},{"C":25},{"D":26},{"E":27}];
var newData = [];
data.forEach(function(val,index){
var keys = Object.keys(val);
keys.push(val[keys]);
newData.push(keys);
});
alert(JSON.stringify(newData));

How to parse dynamic json data?

I am using wikipedia API my json response looks like,
"{
"query": {
"normalized": [
{
"from": "bitcoin",
"to": "Bitcoin"
}
],
"pages": {
"28249265": {
"pageid": 28249265,
"ns": 0,
"title": "Bitcoin",
"extract": "<p><b>Bitcoin</b>isapeer-to-peerpaymentsystemintroducedasopensourcesoftwarein2009.Thedigitalcurrencycreatedandlikeacentralbank,
andthishasledtheUSTreasurytocallbitcoinadecentralizedcurrency....</p>"
}
}
}
}"
this response is coming inside XMLHTTPObject ( request.responseText )
I am using eval to convert above string into json object as below,
var jsonObject = eval('(' +req.responseText+ ')');
In the response, pages element will have dynamic number for the key-value pair as shown in above example ( "28249265" )
How can I get extract element from above json object if my pageId is different for different results.
Please note, parsing is not actual problem here,
If Parse it , I can acess extract as,
var data = jsonObject.query.pages.28249265.extract;
In above line 28249265 is dynamic, This will be something different for different query
assuming that u want to traverse all keys in "jsonObject.query.pages".
u can extract it like this:
var pages = jsonObject.query.pages;
for (k in pages) { // here k represents the page no i.e. 28249265
var data = pages[k].extract;
// what u wana do with data here
}
or u may first extract all page data in array.
var datas = [];
var pages = jsonObject.query.pages;
for (k in pages) {
datas.push(pages[k].extract);
}
// what u wana do with data array here
you can archive that using two methods
obj = JSON.parse(json)
OR
obj = $.parseJSON(json);
UPDATE
Try this this
var obj = JSON.parse("your json data string");
//console.log(obj)
jQuery.each(obj.query.pages,function(a,val){
// here you can get data dynamically
var data = val.extract;
alert(val.extract);
});
JSBIN Example
JSBIN

Adding another data series in plot

I currently have a PHP file which returns:
[[38,38],[38,113],[38,188],[38,263],[38,338],[38,413],[38,488],[113,38],[113,113],[113,188],[113,263],[113,338],[113,413],[113,488],[188,38],[188,113],[188,188],[188,263],[188,338],[188,413],[188,488],[263,38],[263,113],[263,188],[263,263],[263,338],[263,413],[263,488],[338,38],[338,113],[338,188],[338,263],[338,338],[338,413],[338,488],[413,38],[413,113],[413,188],[413,263],[413,338],[413,413],[413,488],[488,38],[488,113],[488,188],[488,263],[488,338],[488,413],[488,488],[75,75],[75,150],[75,225],[75,300],[75,375],[75,450],[150,75],[150,150],[150,225],[150,300],[150,375],[150,450],[225,75],[225,150],[225,225],[225,300],[225,375],[225,450],[300,75],[300,150],[300,225],[300,300],[300,375],[300,450],[375,75],[375,150],[375,225],[375,300],[375,375],[375,450],[450,75],[450,150],[450,225],[450,300],[450,375],[450,450]]
I use this in an AJAX call like
$.ajax({
url:'fetcher/allseedpositions.php',
async: false,
success:function(datasets){
seedPos = jQuery.parseJSON(datasets);
allNodePos = $.plot($("#allnodepositions"),[ seedPos ],optionsSeed);
}
})
to plot but now I want another series to be plotted also along with this, with different symbol.
I am confused on using JSON and I cannot add more properties.
You should be able to create a new array and push the next data set for display. http://jsfiddle.net/fZbVL/
var dataSet1 = [
[1,5],[4,7]
];
var dataSet2 = [
[1,2],[3,4]
];
var dataSet3 = [
[1,4],[4,6]
]
var data = []
data.push(dataSet1);
data.push(dataSet2);
data.push(dataSet3);
$.plot($("#placeholder"),
data);

Highcharts with multiple series from JSON

After reading and testing since few days (And already post here but with a wrong question) I really need you because I fail again and again...
My goal : having many series on same charts (and many charts in the future)
My data source : a mysql and a json output :
"[{"name":"Station 1","data":"1360191600,398.625"},{"name":"Station 1","data":"1360192500,398.625"},{"name":"Station 1","data":"1360193400,398.25"},{"name":"Station 1","data":"1360194300,397.375"},{"name":"Station 1","data":"1360195200,397.5"},{"name":"Station 1","data":"1360196100,397.5"},{"name":"Station 1","data":"1360199700,396.75"},{"name":"Station 1","data":"1360200600,397"}...
These data are an example because in normal time I have many station and some with only the timestamp data.
My big fail at this moment is to send these information to the series:[] option.
I have try some loops like this :
data=JSON.parse(data) ;
var series = [];
series.data = [];
$.each(data,function(i,ligne) {
var string = JSON.stringify(ligne);
var obj = $.parseJSON(string);
//var index_serie = obj.name.slice(0,1) ;
console.log(obj) ;
points=(obj.data) ;
series.name=obj.name ;
series.data.push(points) ;
}) ;
options.series.push(series) ;
console.log(options.series) ;
var chart = new Highcharts.Chart(options);
The options of the chart are defined before the ajax call.
I have try with a other format of json like ["name":"station1","data":"[1321654,10],[5465... but I have difficulties to add the [] in my sql quesry and the GROUP_CONCAT have some limitation (2014 character)
So help me to create a nice loop in order to render multiple series with their name etc
Thanks for your help...
Can't you change that "almost" JSON to "another" JSON? Maybe something like this:
[{
"name":'station 1',
"data": [ [360191600,398.625], [360191600,398.625], [360191600,398.625] ... [360191600,398.625] ]
}, {
"name":'station 2',
"data": [ [360191600,398.625], [360191600,398.625], [360191600,398.625] ... [360191600,398.625] ]
}]
If not, you have to add some parsing for your values, example:
data = JSON.parse(data);
var names = [];
$.each(data, function (i, ligne) {
var ind = names.indexOf(ligne.name),
splited = ligne.data.split(','),
x = parseFloat(splited[0]),
y = parseFloat(splited[1]);
if (ind == -1) {
/*series name spotted first time need to add new series */
ind = names.push(ligne.name) - 1;
options.series.push({
data: [],
name: ligne.name
});
}
if(!isNaN(x) && !isNaN(y)){
options.series[ind].data.push([x,y]);
}
});
And working jsfiddle: http://jsfiddle.net/3bQne/40/

Categories

Resources