CODEWITHSUNDEEP
javascriptreact-native
colla
colla

Reputation: 837

Javascript: map Array of Objects with unknown keys

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?

Upvotes: 0

Views: 965

Answers (2)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

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));

Upvotes: 1

thedude
thedude

Reputation: 9814

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

Upvotes: 3

Related Questions