Javascript: map Array of Objects with unknown keys

Question

I have an array of objects with keys that have different names.

    let array = [{"obj1": 1, "obj2": 2}, {"obj3": 3}]

I want to be able to display on the front (react-native) the key and the value. I tried doing so with a map and object.entries but it is not working (Error: Objects are not valid as a React child . If you meant to render a collection of children, use an array instead.):

    {Object.entries(array).map(([key, val] = entry) => {
       return (<Text>{[key, val]}</Text>)
    })

How could I display simply in a Text the key and the value of each object?

thedude · Accepted Answer · 2022-06-28 13:54:39Z

3

Try this:

{array.map(item => (
  <div>
    {Object.entries(item).map(([key, val]) => {
      return (
        <Text>
          {key} = {val}
        </Text>
      )
    })}
  </div>
))}

Note: please add keys when using in real application

answered Jun 28, 2022 at 13:54

thedude

9,8371 gold badge34 silver badges33 bronze badges

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

Comments

Mr. Polywhirl · Accepted Answer · 2022-06-28 13:57:08Z

1

You should reduce the array, spread the entries, and then flatten. The result will be an array of key-value pairs.

const array = [{ "obj1": 1, "obj2": 2 }, { "obj3": 3 }]

const keyValuePairs = array
  .reduce((pairs, obj) => [...pairs, Object.entries(obj)], [])
  .flat();

keyValuePairs.forEach(([key, val]) => console.log(key, val));

answered Jun 28, 2022 at 13:57

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

Collectives™ on Stack Overflow

Javascript: map Array of Objects with unknown keys

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related