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?

Answer 1

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

Answer 2

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