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

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.

CodePudding user response：

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.

CodePudding user response：

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