Convert JSON object to array using javascript

Question

I have a jQuery ajax request which returns data in json format, how can we convert it and push in to an array. TIA.

[{"Day":"Nov 03","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":null},
{"Day":"Nov 06","Saavor Kitchen":null,"Home Kitchen":1,"Restaurant":1},
{"Day":"Nov 07","Saavor Kitchen":null,"Home Kitchen":null,"Restaurant":1},
{"Day":"Nov 08","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":null},
{"Day":"Nov 09","Saavor Kitchen":null,"Home Kitchen":4,"Restaurant":null},
{"Day":"Nov 10","Saavor Kitchen":null,"Home Kitchen":3,"Restaurant":null},
{"Day":"Nov 11","Saavor Kitchen":null,"Home Kitchen":4,"Restaurant":null},
{"Day":"Nov 13","Saavor Kitchen":null,"Home Kitchen":4,"Restaurant":1},
{"Day":"Nov 14","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":1},
{"Day":"Nov 15","Saavor Kitchen":null,"Home Kitchen":5,"Restaurant":null},
{"Day":"Nov 16","Saavor Kitchen":null,"Home Kitchen":5,"Restaurant":null},
{"Day":"Oct 30","Saavor Kitchen":null,"Home Kitchen":null,"Restaurant":2},
{"Day":"Oct 31","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":3}]

Desired output :-

 [
 ['Day', 'Saavor Kitchen', 'Home Kitchen', 'Restaurant '],
 ['Nov 03', 1000, 400, 50],
 ['Nov 04', 1170, 460, 90],
 ['Nov 05', 660, 1120, 58],
 ['Nov 06', 1030, 540, 88]
 ] 

• MysterX: Why do you need so strange conversion?
• Sunil Chaudhary: i need it to for google charts...
• MysterX: Well, so it is not enough clear where do you expect to get years and other data. Which fields need to be converted to the desired array elements
• cнŝdk: Where does ['2004', 1000, 400, 50] come from?!!
• Tom Oakley: What have you tried so far? Stack Overflow isn't a code-writing service, but a problem-solving one. We're happy to help you reach a solution but you need to do some research or write an initial version first.

Answer 1

You can do it like below (using .map and .unshift):-

var json = '[{"Day":"Nov 03","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":null},{"Day":"Nov 06","Saavor Kitchen":null,"Home Kitchen":1,"Restaurant":1},{"Day":"Nov 07","Saavor Kitchen":null,"Home Kitchen":null,"Restaurant":1},{"Day":"Nov 08","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":null},{"Day":"Nov 09","Saavor Kitchen":null,"Home Kitchen":4,"Restaurant":null},{"Day":"Nov 10","Saavor Kitchen":null,"Home Kitchen":3,"Restaurant":null},{"Day":"Nov 11","Saavor Kitchen":null,"Home Kitchen":4,"Restaurant":null},{"Day":"Nov 13","Saavor Kitchen":null,"Home Kitchen":4,"Restaurant":1},{"Day":"Nov 14","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":1},{"Day":"Nov 15","Saavor Kitchen":null,"Home Kitchen":5,"Restaurant":null},{"Day":"Nov 16","Saavor Kitchen":null,"Home Kitchen":5,"Restaurant":null},{"Day":"Oct 30","Saavor Kitchen":null,"Home Kitchen":null,"Restaurant":2},{"Day":"Oct 31","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":3}]';
var columns = ['Day', 'Saavor Kitchen', 'Home Kitchen', 'Restaurant'];
var result = JSON.parse(json).map(function(obj) {
 return columns.map(function(key) {
 return obj[key];
 });
});
result.unshift(columns);
console.log(result);
console.log(Object.keys($.parseJSON(json)[0]));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

To get keys dynamically:-

console.log(Object.keys($.parseJSON(json)[0]));

Since you already used dataType:'json' in your ajax code, so do:-

console.log(Object.keys(json[0]));

• Sunil Chaudhary: one more thing can we get key name dynamically in this case like 'Day', 'Saavor Kitchen', 'Home Kitchen', 'Restaurant' bcoz these are dynamic and could be change in different scenarios..
• Death-is-the-real-truth: @SunilChaudhary i have added that solution also in my answer. Please check

Answer 2

A simple combination of Object.values() with an Array.map() will do the trick here:

var res = arr.map(function(item) {
 return Object.values(item);
});

Demo:

var arr = [{
 "Day": "Nov 03",
 "Saavor Kitchen": null,
 "Home Kitchen": 2,
 "Restaurant": null
 },
 {
 "Day": "Nov 06",
 "Saavor Kitchen": null,
 "Home Kitchen": 1,
 "Restaurant": 1
 },
 {
 "Day": "Nov 07",
 "Saavor Kitchen": null,
 "Home Kitchen": null,
 "Restaurant": 1
 },
 {
 "Day": "Nov 08",
 "Saavor Kitchen": null,
 "Home Kitchen": 2,
 "Restaurant": null
 },
 {
 "Day": "Nov 09",
 "Saavor Kitchen": null,
 "Home Kitchen": 4,
 "Restaurant": null
 },
 {
 "Day": "Nov 10",
 "Saavor Kitchen": null,
 "Home Kitchen": 3,
 "Restaurant": null
 },
 {
 "Day": "Nov 11",
 "Saavor Kitchen": null,
 "Home Kitchen": 4,
 "Restaurant": null
 },
 {
 "Day": "Nov 13",
 "Saavor Kitchen": null,
 "Home Kitchen": 4,
 "Restaurant": 1
 },
 {
 "Day": "Nov 14",
 "Saavor Kitchen": null,
 "Home Kitchen": 2,
 "Restaurant": 1
 },
 {
 "Day": "Nov 15",
 "Saavor Kitchen": null,
 "Home Kitchen": 5,
 "Restaurant": null
 },
 {
 "Day": "Nov 16",
 "Saavor Kitchen": null,
 "Home Kitchen": 5,
 "Restaurant": null
 },
 {
 "Day": "Oct 30",
 "Saavor Kitchen": null,
 "Home Kitchen": null,
 "Restaurant": 2
 },
 {
 "Day": "Oct 31",
 "Saavor Kitchen": null,
 "Home Kitchen": 2,
 "Restaurant": 3
 }
];
var res = arr.map(function(item) {
 return Object.values(item);
});
console.log(res);

Answer 3

Create an array of keys (the header) to use as the 1st row, and to get the values from the objects.

Parse the json, and iterate it with Array#map. On each iteration, map the array of keys, and extract the values from the object.

Concat the keys array as the 1st array.

var json = '[{"Day":"Nov 03","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":null},{"Day":"Nov 06","Saavor Kitchen":null,"Home Kitchen":1,"Restaurant":1},{"Day":"Nov 07","Saavor Kitchen":null,"Home Kitchen":null,"Restaurant":1},{"Day":"Nov 08","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":null},{"Day":"Nov 09","Saavor Kitchen":null,"Home Kitchen":4,"Restaurant":null},{"Day":"Nov 10","Saavor Kitchen":null,"Home Kitchen":3,"Restaurant":null},{"Day":"Nov 11","Saavor Kitchen":null,"Home Kitchen":4,"Restaurant":null},{"Day":"Nov 13","Saavor Kitchen":null,"Home Kitchen":4,"Restaurant":1},{"Day":"Nov 14","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":1},{"Day":"Nov 15","Saavor Kitchen":null,"Home Kitchen":5,"Restaurant":null},{"Day":"Nov 16","Saavor Kitchen":null,"Home Kitchen":5,"Restaurant":null},{"Day":"Oct 30","Saavor Kitchen":null,"Home Kitchen":null,"Restaurant":2},{"Day":"Oct 31","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":3}]';
var keys = ['Day', 'Saavor Kitchen', 'Home Kitchen', 'Restaurant'];
var result = keys.concat(JSON.parse(json).map(function(o) {
 return keys.map(function(key) {
 return o[key];
 });
}));
console.log(result);

Answer 4

let res = [{"Day":"Nov 03","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":null},{"Day":"Nov 06","Saavor Kitchen":null,"Home Kitchen":1,"Restaurant":1},{"Day":"Nov 07","Saavor Kitchen":null,"Home Kitchen":null,"Restaurant":1},{"Day":"Nov 08","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":null},{"Day":"Nov 09","Saavor Kitchen":null,"Home Kitchen":4,"Restaurant":null},{"Day":"Nov 10","Saavor Kitchen":null,"Home Kitchen":3,"Restaurant":null},{"Day":"Nov 11","Saavor Kitchen":null,"Home Kitchen":4,"Restaurant":null},{"Day":"Nov 13","Saavor Kitchen":null,"Home Kitchen":4,"Restaurant":1},{"Day":"Nov 14","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":1},{"Day":"Nov 15","Saavor Kitchen":null,"Home Kitchen":5,"Restaurant":null},{"Day":"Nov 16","Saavor Kitchen":null,"Home Kitchen":5,"Restaurant":null},{"Day":"Oct 30","Saavor Kitchen":null,"Home Kitchen":null,"Restaurant":2},{"Day":"Oct 31","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":3}];
//console.log((res))
let keys = [];
let day = [];
let saavor = [];
let homeKitch = [];
let restaurant = [];
let allData = [];
res.map((obj) => {
 if (keys.length ==0) keys.push(Object.keys(obj))
 day.push(obj["Day"]);
 saavor.push(obj["Saavor Kitchen"]);
 homeKitch.push(obj["Home Kitchen"]);
 restaurant.push(obj["Restaurant"]);
})
allData[0] = keys;
allData.push(day);
allData.push(saavor);
allData.push(homeKitch);
allData.push(restaurant);
console.log(allData)

Answer 5

 var json = '[{"Day":"Nov 03","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":null},{"Day":"Nov 06","Saavor Kitchen":null,"Home Kitchen":1,"Restaurant":1},{"Day":"Nov 07","Saavor Kitchen":null,"Home Kitchen":null,"Restaurant":1},{"Day":"Nov 08","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":null},{"Day":"Nov 09","Saavor Kitchen":null,"Home Kitchen":4,"Restaurant":null},{"Day":"Nov 10","Saavor Kitchen":null,"Home Kitchen":3,"Restaurant":null},{"Day":"Nov 11","Saavor Kitchen":null,"Home Kitchen":4,"Restaurant":null},{"Day":"Nov 13","Saavor Kitchen":null,"Home Kitchen":4,"Restaurant":1},{"Day":"Nov 14","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":1},{"Day":"Nov 15","Saavor Kitchen":null,"Home Kitchen":5,"Restaurant":null},{"Day":"Nov 16","Saavor Kitchen":null,"Home Kitchen":5,"Restaurant":null},{"Day":"Oct 30","Saavor Kitchen":null,"Home Kitchen":null,"Restaurant":2},{"Day":"Oct 31","Saavor Kitchen":null,"Home Kitchen":2,"Restaurant":3}]';
 $.each($.parseJSON(json), function(idx, obj) {
 $("#demo").html(obj.Day);
 });