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.

Daruda · Accepted Answer · 2022-05-10 10:05:26Z

1

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.

answered May 10, 2022 at 10:05

Daruda

3072 silver badges4 bronze badges

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

3 Comments

fouzan ahmed Over a year ago

Thank you for your answer, but how can I access the message object in a FlatList.

Daruda Over a year ago

You need to prepare the data to contain the needed information, you can do something like const displayData = Object.keys(data).map(id => ({id, ...data[key]})) (that's why I mentioned this function), and then you just pass the displayData to FlatList as the data parameter.

fouzan ahmed Over a year ago

FlatList takes array as an input, not multiple elements in an object. when i pass the solution you provided, FlatList takes the main object as a single element instead of its children. how can i access the children or the Message object. How can I decode the json from [{{},{}}] to [{},{}]. So that it can be used in FlatList.

fouzan ahmed · Accepted Answer · 2022-05-14 10:43:38Z

0

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

answered May 14, 2022 at 10:43

fouzan ahmed

351 silver badge6 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related