Reading multiple objects, in a single object, with in an array, with unique keys. into FlatList

Question

I am trying to display this data in a FlatList.

Array [
  Object {
    "-N1gqvHXUi2LLGdtIumv": Object {
      "Message": "Aeaaeaea",
      "Message_CreatedAt": 1652167522975,
      "Message_by_Email": "[email protected]",
      "Message_by_ID": "DgGfooQIMQQ1rs5xlmmSKCSTrKA2",
    },
    "-N1hB3A_Q7-K75UbvPSM": Object {
      "Message": "Yyoo",
      "Message_CreatedAt": 1652173063182,
      "Message_by_Email": "[email protected]",
      "Message_by_ID": "DgGfooQIMQQ1rs5xlmmSKCSTrKA2",
    },
  },
]

My data looks like this, its multiple objects in a single object within an array, and each object has multiple unique Ids how can I read the data.

My FlatList code

 <FlatList data={data} renderItem={(Item) => <Text>{Item.item. Message}</Text>}

Here the problem is, FlatList is considering the main object and not the children, how can I access and render the children in a Flatlist and how can I access the unique Id.

Answer 1

you can loop over, every single element, and then. de-structure it and combine the key with the body.

  const data = Onsnapshot.forEach((childSnapshot) => {
        const childKey = childSnapshot.key;
        const childData = childSnapshot.val();
        console.log({ childKey, ...childData });}

then you can you this data in FlatList

Answer 2

You can access the keys of an object (your ids) obj using Object.keys(obj). This returns an array of all the keys included in the given object, eg:

Object.keys(obj).map(key => console.log(key, obj[key])

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

You can also take a closer look at the Object.entries() and Object.values() functions.