React js convert grouped column array into normal Array

Question

i have a grouped array like this

this.state.tableData=

[0:{key: "EMAIL",val:  ["[email protected]", "[email protected]", "[email protected]"]}
1:{key: "LASTNAME",val:  ["Smith", "Pierce", "Paige"]}
2:{key: "FIRSTNAME",val: ["John", "Harry", "Howard"]}
3:{key: "SMS",val: ["33123456789", "33111222222", "33777888898"]}
]

i want to convert it to normal array like

0: {EMAIL: "[email protected]", LASTNAME: "Smith", FIRSTNAME: "John", SMS: "33123456789"}
1: {EMAIL: "[email protected]", LASTNAME: "Pierce", FIRSTNAME: "Harry", SMS: "33111222222"}
2: {EMAIL: "[email protected]", LASTNAME: "Paige", FIRSTNAME: "Howard", SMS: "33777888898"}

i have tried following code

this.state.csvHeaders=["EMAIL','FIRSTNAME','LASTNAME']

var contacts=[];
this.state.tableData.map(k => {

        k.val.map(r => {

        Object.keys(this.state.csvHeaders).forEach(key => {

             if(k.val["Col"]==="EMAIL")
             {
                contacts[key]['EMAIL']=r;
             }

        })

        })

    })

but it doesnt work .... any suggestion what more can i modified .how can i store , push them to array ?

@Neeraj Verma your this.state.tableData is right json ? or objects of array — akhtarvahid
– akhtarvahid, Commented Nov 6, 2019 at 6:53
that's not a proper js datastructure, especially the array is not correctly syntactically: ["Smith", "Pierce", "Paige", Col: "LASTNAME"] - the part Col: "LASTNAME" is not a proper array element. Please edit your question with the correct data structures — Tudor Constantin
– Tudor Constantin, Commented Nov 6, 2019 at 7:00
ok , i removed the col , now please tell me how it can be possible ? — Neeraj Verma
– Neeraj Verma, Commented Nov 6, 2019 at 7:07

HMR · Accepted Answer · 2019-11-06 08:25:15Z

3

You can use reduce and forEach to do this:

var tableData = [
  { key: 'EMAIL',val: ['[email protected]','[email protected]','[email protected]'],},
  { key: 'LASTNAME', val: ['Smith', 'Pierce', 'Paige'] },
  { key: 'FIRSTNAME', val: ['John', 'Harry', 'Howard'] },
  { key: 'SMS',val: ['33123456789', '33111222222', '33777888898'],},
];

console.log(
  tableData.reduce((result, { key, val }) => {
    val.forEach((val, index) => {
      result[index] = result[index] || {};
      result[index][key] = val;
    });
    return result;
  }, [])
);

answered Nov 6, 2019 at 8:25

HMR

39.5k26 gold badges99 silver badges175 bronze badges

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

1 Comment

StepUp Over a year ago

Great solution!:)

Tudor Constantin · Accepted Answer · 2019-11-06 08:30:21Z

3

Something along these lines should work:

    const tableData= [
        {key: "EMAIL",val:  ["[email protected]", "[email protected]", "[email protected]"]},
        {key: "LASTNAME",val:  ["Smith", "Pierce", "Paige"]},
        {key: "FIRSTNAME",val: ["John", "Harry", "Howard"]},
        {key: "SMS",val: ["33123456789", "33111222222", "33777888898"]},
];
const csvHeaders = ['EMAIL','FIRSTNAME','LASTNAME', 'SMS'];

const contacts = [];
csvHeaders.forEach( (header, idx) => {

        tableData[0].val.forEach( (info, contactPos) => {
                contacts[contactPos] = contacts[contactPos] || {};
                contacts[contactPos][header] =  tableData.find(row => row.key === header).val[contactPos];
        })
})

console.log(contacts);

edited Nov 6, 2019 at 8:30

answered Nov 6, 2019 at 7:20

Tudor Constantin

26.9k7 gold badges54 silver badges73 bronze badges

5 Comments

Neeraj Verma Over a year ago

0: EMAIL: "[email protected]" FIRSTNAME: "[email protected]" LASTNAME: "[email protected]" SMS: "[email protected]"

Tudor Constantin Over a year ago

right, I haven't looked very closely to the actual result. I updated the code with what works now :)

Neeraj Verma Over a year ago

now it worked ...perfect solution ... thanks ... yes my syntax need correction .. i will do it

Neeraj Verma Over a year ago

wait . one bug i found .. if i changes key : "EMAIL" to key : "SMS" . .. then still array pushes email data in it . this should not happen

Tudor Constantin Over a year ago

Right, I've updated the code to make it search in tableData by current header.

Collectives™ on Stack Overflow

React js convert grouped column array into normal Array

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related