How to push json keys and json values into two arrays - javascript
I have one json file with following structure:
{
"won":3,
"lost":0,
"void":0,
"active":1
}
I've been trying to figure out how to make two arrays in javascript that will contain following information:
var labels = ["won", "lost", "void", "active"];
var data = ["3","0", "0","1"];
But I can't my head around how to do it.
You can use:
var labels = Object.keys(input);
var data = Object.values(input);
However you should check the browsers compatibility:
Object.keys
Object.values
Try this code
var item_list = {
"won":3,
"lost":0,
"void":0,
"active":1
};
var labels = [];
var data = [];
for(var item in item_list){
// console.log(item);
labels.push(item);
data.push(item_list[item]);
}
console.log(labels);
console.log(data);
You can do this too
var mydata = {
"won":3,
"lost":0,
"void":0,
"active":1
};
var first = [],
second = [];
for (var property in mydata) {
if ( ! mydata.hasOwnProperty(property)) {
continue;
}
first.push(property);
second.push(mydata[property]);
}
console.log(first);
console.log(second);
Try This :
var obj = {
"won":3,
"lost":0,
"void":0,
"active":1
}
var keys = new Array();
var values = new Array();
for (var key in obj) {
keys.push(key)
values.push(obj[key]);
}
console.log(keys);
console.log(values);
Related
Converting CSV to JSON using JavaScript
I'm learning JavaScript and i'm trying to convert a CSV file to a JSON.
The structure of my csv is :
Name
Class
region_count
Coordinates
foto_4.jpeg
soccer
1
"all_points_x":[90,80,77,74,82,89,113,142,146,153,162,174,184,199,220,235,261,280,289,298,298,287,279,276,271,268,265,266,270,270,262,249,236,222,213,188,170,151,114,92],"all_points_y":[145,171,192,211,241,263,291,308,310,301,288,275,265,257,246,244,241,238,241,243,235,223,208,196,176,165,148,134,119,114,109,99,96,93,90,89,89,94,116,146]
foto_4.jpeg
tennis
2
"all_points_x":[394,418,445,456,467,472,469,461,448,436,425,412,402,394,384,383,392],"all_points_y":[276,259,260,266,279,296,313,327,335,341,342,338,334,326,313,294,279]
foto_5.jpeg
basket
1
"all_points_x":[345,373,427,479,509,540,553,549,541,526,490,467,455,447,430,421,411,406,400,394,391,381,368,349,337,327,320,308,301],"all_points_y":[23,11,7,22,44,89,140,182,207,230,261,274,263,260,255,255,255,261,268,273,278,286,279,273,268,258,250,242,237]
the desired json structure is:
{"foto_1jpg.jpg121349":{"filename":"foto_1jpg.jpg","regions":[{"shape_attributes":{"all_points_x":[154,157,230,275,278,218,160,112,113,154],"all_points_y":[461,461,455,495,576,625,625,563,505,463]},"region_attributes":{"name":"tennis"}},{"shape_attributes":{"all_points_x":[446,557,685,795,826,815,738,628,505,422,346,331,354,443],"all_points_y":[230,186,212,321,411,538,641,687,684,632,525,426,331,224]},"region_attributes":{"name":"soccer"}}],"file_attributes":{}},"foto_2.jpg325912":{"filename":"foto_2.jpg","regions":[{"shape_attributes":{"all_points_x":[331,403,518,626,688,734,758,681,594,484,369,314,282,274,329],"all_points_y":[399,340,316,342,380,463,607,736,787,796,745,683,592,503,405]},"region_attributes":{"name":"soccer"}},{"shape_attributes":{"name":"polygon","all_points_x":[972,887,830,802,789,804,857,963,1050,1135,1220,1284,1314,1307,1263,1178,1116,1057,955],"all_points_y":[144,195,261,327,397,484,579,639,660,647,603,524,424,335,238,174,146,140,157]}],"file_attributes":{}},"foto_3.jpg196633":{"filename":"foto_3.jpg","regions":[{"shape_attributes":{"name":"polygon","all_points_x":[65,43,49,107,160,215,290,351,406,431,409,373,334,274,203,150,107,70],"all_points_y":[349,421,503,586,622,630,629,593,537,465,356,313,283,264,256,278,303,346]},"region_attributes":{"name":"soccer"}}],"file_attributes":{}}}
I tried to convert this CSV to JSON with this code
var csv = `,Name,Class,Region_count,Coordinates
0,foto_1jpg.jpg,tennis,1,"""all_points_x"":[154,157,230,275,278,218,160,112,113,154],""all_points_y"":[461,461,455,495,576,625,625,563,505,463]"
1,foto_1jpg.jpg,soccer,2,"""all_points_x"":[446,557,685,795,826,815,738,628,505,422,346,331,354,443],""all_points_y"":[230,186,212,321,411,538,641,687,684,632,525,426,331,224]"
2,foto_1jpg.jpg,basket,3,"""all_points_x"":[941,1065,1161,1310,1438,1497,1509,1471,1382,1279,1124,998,916,874,847,874,938],""all_points_y"":[132,44,26,48,144,266,396,514,628,673,687,631,560,479,328,233,135]"
3,foto_2jpg.jpg,soccer,1,"all_points_x:[331,403,518,626,688,734,758,681,594,484,369,314,282,274,329],""all_points_y"":[399,340,316,342,380,463,607,736,787,796,745,683,592,503,405]"
4,foto_2jpg.jpg,basket,2,"""all_points_x"":[972,887,830,802,789,804,857,963,1050,1135,1220,1284,1314,1307,1263,1178,1116,1057,955],""all_points_y"":[144,195,261,327,397,484,579,639,660,647,603,524,424,335,238,174,146,140,157]"
5,foto_2jpg.jpg,tennis,3,"all_points_x:[1186,1233,1273,1282,1267,1231,1178,1154,1135,1131,1142,1182],""all_points_y"":[921,921,891,845,806,777,775,789,819,859,895,919]"
6,foto_3jpg.jpg,soccer,1,"""all_points_x"":[65,43,49,107,160,215,290,351,406,431,409,373,334,274,203,150,107,70],""all_points_y"":[349,421,503,586,622,630,629,593,537,465,356,313,283,264,256,278,303,346]"
7,foto_3jpg.jpg,basket,2,"""all_points_x"":[523,588,647,739,809,854,871,877,860,845,830,823,816,811,804,802,796,774,765,753,726,712,699,685,682,671,670,666,664,632,601,583,549,515,496,469,446,448,467,518],""all_points_y"":[242,203,196,206,247,307,361,436,491,509,515,521,530,537,549,561,572,583,583,562,550,547,554,557,571,578,591,601,620,615,612,608,588,552,532,496,428,370,319,244]"
8,foto_3jpg.jpg,tennis,3,"all_points_x:[838,881,901,917,912,888,869,845,821,804,792,791,813],""all_points_y"":[544,544,569,600,627,646,654,654,651,634,601,578,552]"`;
var map = {};
var rows = csv.split(/\n/g);
var keys = rows.shift().split(",");
rows.forEach(raw_row=>{
var row = {};
var row_key;
var columns = raw_row.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/);
columns.forEach((column, index)=>{
var key = keys[index];
if(!key) return;
if(key === 'Name'){
row_key = column;
return;
}
if(key === "Coordinates"){
column = column.replace(/""/g, '"');
column = column.substring(1, column.length-1);
column = column.replace(/([a-zA-Z_]+):/g, `"$1":`);
try{ column = JSON.parse(`{${column}}`); }catch(e){}
}
row[key] = column;
});
map[row_key] = row;
});
console.log(map);
the JSON create is this:
{"foto_1jpg.jpg":{"Class":"basket","region_count":"3","Coordinates":{"all_points_x":[941,1065,1161,1310,1438,1497,1509,1471,1382,1279,1124,998,916,874,847,874,938],"all_points_y":[132,44,26,48,144,266,396,514,628,673,687,631,560,479,328,233,135]}},"foto_2jpg.jpg":{"Class":"tennis","region_count":"3","Coordinates":{"all_points_x":[1186,1233,1273,1282,1267,1231,1178,1154,1135,1131,1142,1182],"all_points_y":[921,921,891,845,806,777,775,789,819,859,895,919]}},"foto_3jpg.jpg":{"Class":"tennis","region_count":"3","Coordinates":{"all_points_x":[838,881,901,917,912,888,869,845,821,804,792,791,813],"all_points_y":[544,544,569,600,627,646,654,654,651,634,601,578,552]}}}
With my code I can't iterate for all the polygons contained in one picture and I can't add region key (example region) that contains other keys
How can I reach my desired output?
Your initial approach looks pretty good. We just need some more modifications to the data you generated. Instead of directly mapping each row to JSON, first keep data in the array as a line item, and then build the JSON data as follows.
var csv = `,Name,Class,Region_count,Coordinates
0,foto_1jpg.jpg,tennis,1,"""all_points_x"":[154,157,230,275,278,218,160,112,113,154],""all_points_y"":[461,461,455,495,576,625,625,563,505,463]"
1,foto_1jpg.jpg,soccer,2,"""all_points_x"":[446,557,685,795,826,815,738,628,505,422,346,331,354,443],""all_points_y"":[230,186,212,321,411,538,641,687,684,632,525,426,331,224]"
2,foto_1jpg.jpg,basket,3,"""all_points_x"":[941,1065,1161,1310,1438,1497,1509,1471,1382,1279,1124,998,916,874,847,874,938],""all_points_y"":[132,44,26,48,144,266,396,514,628,673,687,631,560,479,328,233,135]"
3,foto_2jpg.jpg,soccer,1,"all_points_x:[331,403,518,626,688,734,758,681,594,484,369,314,282,274,329],""all_points_y"":[399,340,316,342,380,463,607,736,787,796,745,683,592,503,405]"
4,foto_2jpg.jpg,basket,2,"""all_points_x"":[972,887,830,802,789,804,857,963,1050,1135,1220,1284,1314,1307,1263,1178,1116,1057,955],""all_points_y"":[144,195,261,327,397,484,579,639,660,647,603,524,424,335,238,174,146,140,157]"
5,foto_2jpg.jpg,tennis,3,"all_points_x:[1186,1233,1273,1282,1267,1231,1178,1154,1135,1131,1142,1182],""all_points_y"":[921,921,891,845,806,777,775,789,819,859,895,919]"
6,foto_3jpg.jpg,soccer,1,"""all_points_x"":[65,43,49,107,160,215,290,351,406,431,409,373,334,274,203,150,107,70],""all_points_y"":[349,421,503,586,622,630,629,593,537,465,356,313,283,264,256,278,303,346]"
7,foto_3jpg.jpg,basket,2,"""all_points_x"":[523,588,647,739,809,854,871,877,860,845,830,823,816,811,804,802,796,774,765,753,726,712,699,685,682,671,670,666,664,632,601,583,549,515,496,469,446,448,467,518],""all_points_y"":[242,203,196,206,247,307,361,436,491,509,515,521,530,537,549,561,572,583,583,562,550,547,554,557,571,578,591,601,620,615,612,608,588,552,532,496,428,370,319,244]"
8,foto_3jpg.jpg,tennis,3,"all_points_x:[838,881,901,917,912,888,869,845,821,804,792,791,813],""all_points_y"":[544,544,569,600,627,646,654,654,651,634,601,578,552]"`;
var items = []
var rows = csv.split(/\n/g);
var keys = rows.shift().split(",");
rows.forEach(raw_row => {
var row = {};
var columns = raw_row.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/);
columns.forEach((column, index)=>{
var key = keys[index];
if(!key) return;
if(key === "Coordinates"){
column = column.replace(/""/g, '"');
column = column.substring(1, column.length-1);
column = column.replace(/([a-zA-Z_]+):/g, `"$1":`);
try{ column = JSON.parse(`{${column}}`); }catch(e){}
}
row[key] = column;
});
items.push(row);
});
const map = {}
for (const item of items) {
if (!map[item['Name']]) {
map[item['Name']] = {
'filename': item['Name'],
'regions': [],
'file_attributes': {}
}
}
map[item['Name']].regions.push(
{
"shape_attributes": item['Coordinates'],
"region_attributes": { "name": item['Class'] }
}
)
}
console.log(map)
JSON.Stringify returns empty array when Stringifying array of objects
I have an array which is initialized with
var detail = [];
// Have also tried var detail = new Array;
Through the rest of my code, I loop through a data set creating an object in the following manner
while(true) {
var tempObj = {
qty : "",
size : "",
adr : "",
dir : ""
}
// Some Logic
tempObj.qty = val;
tempObj.size = val;
tempObj.adr = val;
tempObj.dir = val;
detail.push(tempObj);
}
Then when I attempt to JSON.Stringify my detail array to send through an AJAX request, it returns a blank array []. This can also be seen in the below screenshot of the console.
Note: The indent at the bottom calling out the prototype as an object is because the screenshot is from the object I am attempting to send to my server. There is other non array based data in that object. I want to stringify the array so it properly sends to the server.
What is causing this behavior and how can I correct it?
Edit 1: Execution of JSON.stringify(detail)
var requestObj = {
field1: “a”,
field2: “b”,
field3: “c”,
data: JSON.stringify(detail)
}
Edit 2: Add full block of code
$("#submit-button").click(function() {
var reqDate = $("#reqDate").val();
var wonum = $("#wonum").val();
var svc = $("#svc").val();
var complaint = $("#complaint").val();
var comments = $("#comm").val();
var detail = new Array;
var topValid = false;
$(".tb-rw").each(function() {
var qty = $(this).find(".quantity");
var size = $(this).find(".size");
var adr = $(this).find(".address");
var dir = $(this).find(".direction");
var mgk = $(this).find(".mgKey");
var tempObj = {};
if(fail == true || topValid == true) {
alert("Please Make Sure all Inputs are Filled Out");
return;
} else {
//tempArr.push(qty.val(), size.val(), dir.val());
tempObj.qty = qty.val();
tempObj.size = size.val();
tempObj.dir = dir.val();
}
findSimilarJobs(adr.val(), mgk.val(), function(data) {
if(data != "clear") {
console.log("FAILED VALIDATION");
console.log(data);
adr.css('border-color', 'red');
alert("Please Make Sure all Addresses are Valid");
return;
} else {
//tempArr.push(adr.val());
tempObj.adr = adr.val();
}
detail.push(tempObj);
});
});
console.log("Preparing to send!");
var requestData = {
"requestedDate": reqDate,
"svc": svc,
"wonum": wonum,
"complaint": complaint,
"comment": comments,
"data": JSON.stringify(detail)
};
console.log(requestData);
console.log(JSON.stringify(detail));
});
Stringify should be all lower case like this stringify, otherwise is won't work. So like, this JSON.Stringify(detail) should be this JSON.stringify(detail)
your tempObj is JSON object and it should have key:value like below
while(true) {
var tempObj = {
qty : "",
size : "",
adr : "",
dir : ""
}
// or you can create empty object
// var tempObj = {};
tempObj.qty = val;
tempObj.size = val;
tempObj.adr = val;
tempObj.dir = val;
detail.push(tempObj);
}
change JSON response in javascript
I am working on WEB API's, I have received the JSON response from server, NOW I want to change the returned response into different JSON's to show different table and graphs.
this is the response from server
{"data":[{"id":3663101,"lstImeis":[{"number":"14370340908558","maxDate":"2017-08-24 22:08:58.0","minDate":"2017-08-24 22:08:58.0"},{"number":"22418344742097","maxDate":"2017-08-24 18:08:56.0","minDate":"2017-08-24 18:08:56.0"}],"number2":789},{"id":3665337,"lstImeis":[{"number":"48717031235502","maxDate":"2017-08-24 21:09:38.0","minDate":"2017-08-24 21:09:38.0"},{"number":"42540009239622","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"},{"number":"42540009239644","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"}],"number2":456}]}
and I need to convert this response to look like this :
{"data":[{"id":3663101,"number":"14370340908558","maxDate":"2017-08-24 22:08:58.0","minDate":"2017-08-24 22:08:58.0","number2":789},{"id":3663101,"number":"22418344742097","maxDate":"2017-08-24 18:08:56.0","minDate":"2017-08-24 18:08:56.0","number2":789},{"id":3665337,"number":"48717031235502","maxDate":"2017-08-24 21:09:38.0","minDate":"2017-08-24 21:09:38.0","number2":456},{"id":3665337,"number":"42540009239622","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0","number2":456},{"id":3665337,"number":"42540009239644","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0","number2":456}]}
this is what I have done so far,
var data = new Array();
var str = '{"data":[{"id":3663101,"lstImeis":[{"number":"14370340908558","maxDate":"2017-08-24 22:08:58.0","minDate":"2017-08-24 22:08:58.0"},{"number":"22418344742097","maxDate":"2017-08-24 18:08:56.0","minDate":"2017-08-24 18:08:56.0"}],"number2":789},{"id":3665337,"lstImeis":[{"number":"48717031235502","maxDate":"2017-08-24 21:09:38.0","minDate":"2017-08-24 21:09:38.0"},{"number":"42540009239622","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"},{"number":"42540009239644","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"}],"number2":456}]}';
var response = JSON.parse(str);
var tableData = response.data;
var dataLength = response.data.length;
for (i = 0; i < dataLength; i++) {
var obj = {};
obj["id"] = tableData[i].id;
for (a = 0; a < tableData[i].lstImeis.length; a++) {
obj["number"] = tableData[i].lstImeis[a].number,
obj["maxDate"] = tableData[i].lstImeis[a].maxDate,
obj["minDate"] = tableData[i].lstImeis[a].minDate
}
obj["number2"] = tableData[i].number2;
data.push(obj);
}
console.log(JSON.stringify(data));
Here is JSFIDDLE
Outer loops works fines but inner loop gives the last updated data, If you look at the given data and changed data, you will see the difference.
Any idea, why its overriding the values in inner for loop and appending only last values into obj?
Your logic is incorrect line
var obj = {};
obj["id"] = tableData[i].id;
should be inside the inner loop. also line
obj["number2"] = tableData[i].number2;
data.push(obj);
should be moved inside the inner loop.
Here is the improved and working code https://jsfiddle.net/dmtfxt35/4/
var response = JSON.parse(str);
var tableData = response.data;
var finalObj = {data:[]};
for (var i in tableData){
for(var a in tableData[i].lstImeis){
var tmpObj = {};
tmpObj['id'] = tableData[i].id;
tmpObj["number"] = tableData[i].lstImeis[a].number;
tmpObj["maxDate"] = tableData[i].lstImeis[a].maxDate;
tmpObj["minDate"] = tableData[i].lstImeis[a].minDate;
tmpObj["number2"] = tableData[i].number2;
finalObj.data.push(tmpObj);
}
}
console.log(JSON.stringify(finalObj));
I hope this helped.
You using the same obj variable while inserting the data to array.
Obj is dict and it got updated on loop.
I have updated the code as per you requirement
<script>
var data = new Array();
var str = '{"msg":"success","code":"200","status":null,"data":[{"id":3663101,"lstImeis":[{"number":"14370340908558","maxDate":"2017-08-24 22:08:58.0","minDate":"2017-08-24 22:08:58.0"},{"number":"22418344742097","maxDate":"2017-08-24 18:08:56.0","minDate":"2017-08-24 18:08:56.0"}],"number2":789},{"id":3665337,"lstImeis":[{"number":"48717031235502","maxDate":"2017-08-24 21:09:38.0","minDate":"2017-08-24 21:09:38.0"},{"number":"42540009239622","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"},{"number":"42540009239644","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"}],"number2":456}],"draw":0,"limit":0,"recordsFiltered":0,"recordsTotal":0}';
var response = JSON.parse(str);
var tableData = response.data;
var dataLength = response.data.length;
for(i = 0; i < dataLength; i++){
for(a = 0; a < tableData[i].lstImeis.length; a++){
var obj = {};
obj["id"] = tableData[i].id;
obj["number"] = tableData[i].lstImeis[a].number;
obj["maxDate"] = tableData[i].lstImeis[a].maxDate;
obj["minDate"] = tableData[i].lstImeis[a].minDate;
obj["number2"] = tableData[i].number2;
data.push(obj);
}
}
console.log(JSON.stringify(data));
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can use array#reduce and array#map.
var response = [{"id":3663101,"lstImeis":[{"number":"14370340908558","maxDate":"2017-08-24 22:08:58.0","minDate":"2017-08-24 22:08:58.0"},{"number":"22418344742097","maxDate":"2017-08-24 18:08:56.0","minDate":"2017-08-24 18:08:56.0"}],"number2":789},{"id":3665337,"lstImeis":[{"number":"48717031235502","maxDate":"2017-08-24 21:09:38.0","minDate":"2017-08-24 21:09:38.0"},{"number":"42540009239622","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"},{"number":"42540009239644","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"}],"number2":456}];
var result = response.reduce(function(res, obj) {
var temp = obj.lstImeis.map(function(o) {
return Object.assign({}, o, {id: obj.id, number2: obj.number2});
});
return res.concat(temp);
},[])
var output = {data: result};
console.log(JSON.stringify(output));
Look at this Fiddle. You were pushing last updated obj data. You had to push obj each time you update it.
for(i = 0; i < dataLength; i++){
for(a = 0; a < tableData[i].lstImeis.length; a++){
var obj = {};
obj["id"] = tableData[i].id;
obj["number"] = tableData[i].lstImeis[a].number;
obj["maxDate"] = tableData[i].lstImeis[a].maxDate;
obj["minDate"] = tableData[i].lstImeis[a].minDate;
obj["number2"] = tableData[i].number2;
data.push(obj);
}
}
Get data out from callback inside query
I am trying to get data out from query inside the query. I tried everything without success.
getvideos() {
var sectionHolder = [];
var ids = [];
var titles = [];
var videos = [];
var challengeCl = Parse.Object.extend("Challenges");
var query = new Parse.Query(challengeCl);
query.find().then((data) => {
for(var key = 0; key < data.length; key++) {
var object = data[key];
var videoid = object.id;
var title = object.get('title');
ids.push(videoid)
titles.push(title)
var video = Parse.Object.extend('Videos');
var queryv = new Parse.Query(video);
queryv.equalTo('challengeid', videoid);
queryv.find().then(
(video) => {
videos.push(video); //i want to get this data out from this scope
});
sectionHolder.push({title: title, data: videos}); // <---- i want to put videos data in data
}
console.log(sectionHolder);
this.setState({listData: sectionHolder});
});
}
I read parse documentation but there is nothing related to this.
missing ; before statement jquery error
I get this error that I don't understand:
`missing ; before statement`
Here is the code
},
'addevent' : function(data, formData){
var entry = fx.deserialize(formData);
},
'deserialize' : function(str){
var data = str.split("&"),
pairs = [], entry{}, key, val; //ERROR
The syntax
entry{}
doesn't look right to me.
Do you want
entry={},
Have it in one line:
var data = str.split("&"), pairs = [], entry{}, key, val;
You are missing = sign, should be:
..., entry = {}, ...
},
'addevent' : function(data, formData){
var entry = fx.deserialize(formData);
},
'deserialize' : function(str){
var data = str.split("&");
pairs = [];
entry = {key, val};
var data = str.split("&"), <====== Here should be ';'
!var! pairs = [], entry{}, key, val; //ERROR // var should be again