Convert complex array to simple array using javascript

Question

I have complex json like this:

const lstCountry = {
   "cols": ["id", "countryName", "area"],
   "data": [
       ["1", "Russia", "17098242"],
       ["2", "Canada", "9970610"],
       ["3", "China", "9640821"],
       ["4", "United States", "9629091"],
       ["5", "Brazil", "8514877"],
       ["6", "Australia", "7741220"],
       ["7", "India", "3287263"],
       ["8", "Argentina", "2780400"],
       ["9", "Kazakhstan", "2724900"],
       ["10", "Sudan", "2505813"]
    ]
};

Now i want to convert into simple array as a output like this :

const countryList = [
    { "id": "1", "countryName": "Russia", "area": "17098242" },
    { "id": "2", "countryName": "Canada", "area": "9970610" },
    { "id": "3", "countryName": "China", "area": "9640821" },
    { "id": "4", "countryName": "United States", "area": "9629091" },
    { "id": "5", "countryName": "Brazil", "area": "8514877" },
    { "id": "6", "countryName": "Australia", "area": "7741220" },
    { "id": "7", "countryName": "India", "area": "3287263" },
    { "id": "8", "countryName": "Argentina", "area": "2780400" },
    { "id": "9", "countryName": "Kazakhstan", "area": "2724900" },
    { "id": "10", "countryName": "Sudan", "area": "2505813" },
];

I have already tried below but got output using index as a key, So how can i convert that key with cols array as a key and another data array as a value and generate my own array with these key and value combination.

Or Is there any easy way to archive this like using map, reduce?

Already tried this :

let mainData = [];
for (let i = 1; i < Object.keys(data).length; i++) {
    const eleData = data[Object.keys(data)[i]];
    for (let j = 0; j < eleData.length; j++) {
        const element = Object.assign({}, eleData[j]);
        mainData.push(element);
    };            
};
console.log('mainData:', mainData)

Tried function output:

const mainData = [
    { "0": "1", "1": "Russia", "2": "17098242" },
    { "0": "2", "1": "Canada", "2": "9970610" },
    { "0": "3", "1": "China", "2": "9640821" },
    { "0": "4", "1": "United States", "2": "9629091" },
    { "0": "5", "1": "Brazil", "2": "8514877" },
    { "0": "6", "1": "Australia", "2": "7741220" },
    { "0": "7", "1": "India", "2": "3287263" },
    { "0": "8", "1": "Argentina", "2": "2780400" },
    { "0": "9", "1": "Kazakhstan", "2": "2724900" },
    { "0": "10", "1": "Sudan", "2": "2505813" },
];

And what happened with what you already tried? Did you try doing it with map and/or reduce? — jonrsharpe
– jonrsharpe, Commented Aug 14, 2019 at 7:32
I had updated question, but i got answer from below answer, let just wait for more few minutes to accept as a answer — Shashikant Devani
– Shashikant Devani, Commented Aug 14, 2019 at 7:39
Can you try this? var data= lstCountry.data.map(item=> { return { id:item[0], countryName: item[1], area:item[2]}}); console.log(data); — Bharat Choudhary
– Bharat Choudhary, Commented Aug 14, 2019 at 7:40

Kobe · Accepted Answer · 2019-08-14 07:54:58Z

4

You can simply map over each object and create each object pertaining to each column using reduce:

const lstCountry = {
   "cols": ["id", "countryName", "area"],
   "data": [
       ["1", "Russia", "17098242"],
       ["2", "Canada", "9970610"],
       ["3", "China", "9640821"],
       ["4", "United States", "9629091"],
       ["5", "Brazil", "8514877"],
       ["6", "Australia", "7741220"],
       ["7", "India", "3287263"],
       ["8", "Argentina", "2780400"],
       ["9", "Kazakhstan", "2724900"],
       ["10", "Sudan", "2505813"]
    ]
};

const { cols, data } = lstCountry

console.log(data.map(arr => arr.reduce((a, e, i) => (a[cols[i]] = e, a), {})))

EDIT: As a function:

const fn = (cols, data) => data.map(arr => arr.reduce((a, e, i) => (a[cols[i]] = e, a), {}))

console.log(fn(['test'], [[1],[2],[3],[4]]))
console.log(fn(['test', 'true'], [[1,1],[2,1],[3,1],[4,1]]))

The solution is the most performance-oriented as there are only two loops, rather than three, according to this JSPerf:

edited Aug 14, 2019 at 7:54

answered Aug 14, 2019 at 7:34

Kobe

6,4681 gold badge18 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shashikant Devani Over a year ago

I don't want to take cols and data as a static, is there any way to make it dynamic if i change name from cols and data to columns and lstData than i can also use same function?

Kobe Over a year ago

@ShashikantDevani Look at my second code snippet :)

Kobe Over a year ago

@ShashikantDevani No problem. If you ever need more help, feel free to ask.

Nina Scholz · Accepted Answer · 2019-08-14 07:44:42Z

2

You could map entries of the object and build new objects.

var lstCountry = { cols: ["id", "countryName", "area"], data: [["1", "Russia", "17098242"], ["2", "Canada", "9970610"], ["3", "China", "9640821"], ["4", "United States", "9629091"], ["5", "Brazil", "8514877"], ["6", "Australia", "7741220"], ["7", "India", "3287263"], ["8", "Argentina", "2780400"], ["9", "Kazakhstan", "2724900"], ["10", "Sudan", "2505813"]] },
    result = lstCountry.data.map(a =>
        Object.fromEntries(a.map((v, i) => [lstCountry.cols[i], v])));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

An EDGE version with Object.assign.

const getObjects = (keys, data) => data.map(a =>
        Object.assign(...a.map((v, i) => ({ [keys[i]]: v }))));

var lstCountry = { cols: ["id", "countryName", "area"], data: [["1", "Russia", "17098242"], ["2", "Canada", "9970610"], ["3", "China", "9640821"], ["4", "United States", "9629091"], ["5", "Brazil", "8514877"], ["6", "Australia", "7741220"], ["7", "India", "3287263"], ["8", "Argentina", "2780400"], ["9", "Kazakhstan", "2724900"], ["10", "Sudan", "2505813"]] },
    result = getObjects(lstCountry.cols, lstCountry.data);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Aug 14, 2019 at 7:44

answered Aug 14, 2019 at 7:35

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

3 Comments

kemicofa Over a year ago

That's cool. Didn't know fromEntries existed +1. Though, it's not supported in edge.

Shashikant Devani Over a year ago

I don't want to take cols and data as a static, is there any way to make it dynamic if i change name from cols and data to columns and lstData than i can also use same function?

Nina Scholz Over a year ago

you could take a function and hand over the data array and the keys array, like in the second example.

CertainPerformance · Accepted Answer · 2019-08-14 07:47:40Z

2

Map the .data property, and use Object.fromEntries to transform each .data subarray to an object based on the keys in the cols:

const lstCountry = {
   "cols": ["id", "countryName", "area"],
   "data": [
       ["1", "Russia", "17098242"],
       ["2", "Canada", "9970610"],
       ["3", "China", "9640821"],
       ["4", "United States", "9629091"],
       ["5", "Brazil", "8514877"],
       ["6", "Australia", "7741220"],
       ["7", "India", "3287263"],
       ["8", "Argentina", "2780400"],
       ["9", "Kazakhstan", "2724900"],
       ["10", "Sudan", "2505813"]
    ]
};

const countryList = lstCountry.data.map(
  vals => Object.fromEntries(
    vals.map((val, i) => [lstCountry.cols[i], val])
  )
);
console.log(countryList);

For dynamic property names in the lstCountry object, just use bracket notation instead:

const lstCountry = {
   "cols": ["id", "countryName", "area"],
   "data": [
       ["1", "Russia", "17098242"],
       ["2", "Canada", "9970610"],
       ["3", "China", "9640821"],
       ["4", "United States", "9629091"],
       ["5", "Brazil", "8514877"],
       ["6", "Australia", "7741220"],
       ["7", "India", "3287263"],
       ["8", "Argentina", "2780400"],
       ["9", "Kazakhstan", "2724900"],
       ["10", "Sudan", "2505813"]
    ]
};

const keyProp = 'cols';
const valProp = 'data';

const countryList = lstCountry[valProp].map(
  vals => Object.fromEntries(
    vals.map((val, i) => [lstCountry[keyProp][i], val])
  )
);
console.log(countryList);

edited Aug 14, 2019 at 7:47

answered Aug 14, 2019 at 7:36

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

4 Comments

Shashikant Devani Over a year ago

I don't want to take cols and data as a static, is there any way to make it dynamic if i change name from cols and data to columns and lstData than i can also use same function?

CertainPerformance Over a year ago

Just use bracket notation instead

Shashikant Devani Over a year ago

Yeah it make sense but i know if it's come from backend site (both are dynamic) object?

CertainPerformance Over a year ago

Just put them into the keyProp and valProp variables like in the snippet in the answer

Eddie · Accepted Answer · 2019-08-14 07:48:30Z

2

One option is using map to loop thru the data array. Use reduce to construct the object.

const lstCountry = {
  "cols": ["id", "countryName", "area"],
  "data": [
    ["1", "Russia", "17098242"],
    ["2", "Canada", "9970610"],
    ["3", "China", "9640821"],
    ["4", "United States", "9629091"],
    ["5", "Brazil", "8514877"],
    ["6", "Australia", "7741220"],
    ["7", "India", "3287263"],
    ["8", "Argentina", "2780400"],
    ["9", "Kazakhstan", "2724900"],
    ["10", "Sudan", "2505813"]
  ]
};

const rows = lstCountry['data'];
const cols = lstCountry['cols'];

const countryList = rows.map(o => o.reduce((c, v, i) => Object.assign(c, {[cols[i]]: v}), {}));

console.log(countryList);

edited Aug 14, 2019 at 7:48

answered Aug 14, 2019 at 7:35

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

3 Comments

Shashikant Devani Over a year ago

I don't want to take cols and data as a static, is there any way to make it dynamic if i change name from cols and data to columns and lstData than i can also use same function?

Eddie Over a year ago

You can assign it in a variable or something :)

Shashikant Devani Over a year ago

Yeah it make sense but i know if it's come from backend site (both are dynamic) object?

Jack Bashford · Accepted Answer · 2019-08-14 07:36:53Z

0

Use map with Object.fromEntries really simply like so:

const lstCountry = {"cols":["id","countryName","area"],"data":[["1","Russia","17098242"],["2","Canada","9970610"],["3","China","9640821"],["4","United States","9629091"],["5","Brazil","8514877"],["6","Australia","7741220"],["7","India","3287263"],["8","Argentina","2780400"],["9","Kazakhstan","2724900"],["10","Sudan","2505813"]]};

const countryList = lstCountry.data.map(e => Object.fromEntries(lstCountry.cols.map((f, i) => [f, e[i]])));

console.log(countryList);

.as-console-wrapper { max-height: 100% !important; top: auto; }

answered Aug 14, 2019 at 7:36

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

1 Comment

Shashikant Devani Over a year ago

I don't want to take cols and data as a static, is there any way to make it dynamic if i change name from cols and data to columns and lstData than i can also use same function?

kemicofa · Accepted Answer · 2019-08-14 07:34:56Z

You can do this with Array#map and Array#reduce.

This solution assumes that the length of your cols is the same for each row in data.

const countries = {
   "cols": ["id", "countryName", "area"],
   "data": [
       ["1", "Russia", "17098242"],
       ["2", "Canada", "9970610"],
       ["3", "China", "9640821"],
       ["4", "United States", "9629091"],
       ["5", "Brazil", "8514877"],
       ["6", "Australia", "7741220"],
       ["7", "India", "3287263"],
       ["8", "Argentina", "2780400"],
       ["9", "Kazakhstan", "2724900"],
       ["10", "Sudan", "2505813"]
    ]
};

const res = countries.data.map(arr=>{
  return countries.cols.reduce((a,c,i)=>{
    return {[c]:arr[i], ...a}
  },{})
});

console.log(res);

Collectives™ on Stack Overflow

Convert complex array to simple array using javascript

6 Answers 6

3 Comments

3 Comments

4 Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

3 Comments

4 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related