How to create dynamic table headers from JSON in React?

Question

I have a JSON array of objects, I want to create a dynamic table columns/headers based on it in React.

The data:

example = [
  {
    id: 0,
    city: 'New York',
  },
  {
    id: 1,
    city: 'Paris',
  },
]

I want to iterate through the array, get the key and add extra fields. So far I have:

columns() {
    return Object.keys(Example[0]).map((key) => {
      return {
        cityName: key,
        capital: false,
      };
    });
  }

I get the keys, but they are unordered (random) and the extra field is added to all the objects. I want to get each key to use it as table header (column name) and be able to change capital for each object. How can I do that in React?

are you sure about Example[0]).map((key)... must be with small e? — sinawic
– sinawic, Commented Sep 4, 2018 at 7:52
No this was a mistake when I wrote the question, it's correct in the code. — asker
– asker, Commented Sep 4, 2018 at 7:57

Vatev · Accepted Answer · 2018-09-04 08:04:13Z

1

You can use Array.map for this.

example = [
  {
    id: 0,
    city: 'New York',
  },
  {
    id: 1,
    city: 'Paris',
  },
];
example.map((obj) => {
  return {
   CITY : obj.city,
   ID : obj.id
   // Do whatever with the objects
 }
})

edited Sep 4, 2018 at 8:04

Vatev

7,5801 gold badge36 silver badges42 bronze badges

answered Sep 4, 2018 at 7:40

Ankit

9906 silver badges12 bronze badges

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

5 Comments

asker Over a year ago

That returns the field, e.g. 'New York', I want to get the key; city. I want to use the key as table header.

Ankit Over a year ago

If you want to get the key, now run a loop on objects inside map. i.e. Object.keys on each object and you can easily get the key.

asker Over a year ago

you mean a new map inside map? I'm not sure if that's the best way, or even if it works.

Ankit Over a year ago

No, object.keys...loop through the obj

Ankit Over a year ago

example.map((obj) => { for(var k in obj) { console.log(k) // do something with the keys }; })

siver · Accepted Answer · 2018-09-04 09:45:48Z

0

arr => arr && arr[0] ? object.keys(arr[0]) : [];

make sure all items in array have same keys

answered Sep 4, 2018 at 9:45

siver

651 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to create dynamic table headers from JSON in React?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related