React js Map in nested array without key names

Question

i have json array like this

EMAIL: (3) ["[email protected]", "[email protected]", "[email protected]"]
FIRSTNAME: (3) ["John", "Harry", "Howard"]
LASTNAME: (3) ["Smith", "Pierce", "Paige"]
SMS: (3) ["33123456789", "33111222222", "33777888898"]

I am trying to create a table like this

then group of firstName , LastName and so on

in render() i have tried

{columnMapRows.EMAIL.map(row => (
    <TableRow >
    <TableCell align="center">{row}</TableCell>
    </TableRow>
    ))}

But i dont want to map with column name , i am looking for generic solution . email , firstname , lastname are dynamic , coming form csv file , they can be changed anytime

i have also tried foreach and simple array loop . but it doesnt work Please suggest

Are you using any specific UI library?

Atin Singh
– Atin Singh

2019-11-05 09:41:49 +00:00
Commented Nov 5, 2019 at 9:41 — Atin Singh
– Atin Singh, Commented Nov 5, 2019 at 9:41
@Neeraj Verma what is your required output?

akhtarvahid
– akhtarvahid

2019-11-05 09:43:06 +00:00
Commented Nov 5, 2019 at 9:43 — akhtarvahid
– akhtarvahid, Commented Nov 5, 2019 at 9:43
what you are getting in row for each EMAIL????

Prakash Karena
– Prakash Karena

2019-11-05 09:45:16 +00:00
Commented Nov 5, 2019 at 9:45 — Prakash Karena
– Prakash Karena, Commented Nov 5, 2019 at 9:45

nubinub · Accepted Answer · 2019-11-05 10:43:59Z

1

You should use the index within your map function to access other data.

{columnMapRows.EMAIL.map((email, i) => (    
    <TableRow key={email}>
     <TableCell align="center">{email}</TableCell>
     <TableCell align="center">{columnMapRows.FIRSTNAME[i]}</TableCell>
     <TableCell align="center">{columnMapRows.LASTNAME[i]}</TableCell>
     <TableCell align="center">{columnMapRows.SMS[i]}</TableCell>
    </TableRow>
))}
// this assumes that all the array are the same length which seems to be the case

EDIT: dynamic solution assuming email is always there

{columnMapRows.EMAIL.map((email, i) => (    
    <TableRow key={email}>
     {Object.keys(columnMapRows).map((key) => (
        <TableCell align="center" key={key} >{columnMapRows[key][i]} </TableCell>
     ))}
    </TableRow>
))}

EDIT: dynamic solution with data refactor

const keys = Object.keys(columnMapRows);
const items = columnMapRows[keys[0]].map(() => ({}));
keys.forEach((key) => {
  columnMapRows[key].forEach((data, i) => {
     items[i][key] = data;
  });
});

{items.map((item) => (    
    <TableRow>
      {Object.keys(item).map((key) => (
         <TableCell key={key}>{item[key]}</TableCell>
      ))}
    </TableRow>
))}

This could certainly be improved but I think it shows the main idea. I decided to construct an array of object as I think it's pretty easier yo understand. Then iterate on those object properties using Object.keys.

edited Nov 5, 2019 at 10:43

answered Nov 5, 2019 at 9:53

nubinub

1,9382 gold badges15 silver badges24 bronze badges

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

11 Comments

Neeraj Verma Over a year ago

email , firstname , lastname are dynamic , coming from csv file , they can be changed anytime

nubinub Over a year ago

You mean you can have for example phone instead of sms or some data without lastname ?

Neeraj Verma Over a year ago

yes , instead of lastname , their can be another column like phone

Neeraj Verma Over a year ago

its wrong , why firstname , lastname come inside email ?

Neeraj Verma Over a year ago

in columnMapRows.EMAIL.map ... EMAIL want to come dynamically

|

Collectives™ on Stack Overflow

React js Map in nested array without key names

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related