Skip to content
Advertisement

React – Access JSON array data and its sub data

This is my JSON array Which is related to some personal data and I want to access these data from my react app this JSON file is in my react app

{
    "person": [
      {
        "id": "userId",
        "sellerImage": "https://i.pravatar.cc/300",
        "lastOnline": "Date of last online",
        "sellerName": "Ryann Remo",
        "isOnline": true,
        "lastSeenDate": "Today",
        "product":"Rough Shirt",
        "messages": [
          {
            "id": "messageId",
            "userId": "userIdOfUser",
            "message": "Message text 01",
            "date": "Date of message",
            "time": "time of message",
            "isRead": false
          },
          {
            "id": "messageId",
            "userId": "userIdOfSeller",
            "message": "Message text 02",
            "date": "Date of message",
            "time": "time of message",
            "isRead": true
          },
          {
            "id": "messageId",
            "userId": "userIdOfSeller",
            "message": "Message text",
            "date": "Date of message 03",
            "time": "time of message",
            "isRead": false
          }
        ]
      },

      {
        "id": "userId",
        "sellerImage": "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
        "lastOnline": "Date of last online",
        "sellerName": "Karp Bonolo",
        "isOnline": true,
        "lastSeenDate": "Yesterday",
        "product":"Rough Shirt",
        "messages": [
          {
            "id": "messageId",
            "userId": "userIdOfUser",
            "message": "Message text",
            "date": "Date of message",
            "time": "time of message",
            "isRead": false
          },
          {
            "id": "messageId",
            "userId": "userIdOfSeller",
            "message": "Message text",
            "date": "Date of message",
            "time": "time of message",
            "isRead": true
          },
          {
            "id": "messageId",
            "userId": "userIdOfSeller",
            "message": "Message text",
            "date": "Date of message",
            "time": "time of message",
            "isRead": false
          }
        ]
      }
    ]
  }

I need to access "message": "Message text" in this JSON file from a react application. How Can I do that ???

(Example I need to print Message text 01 Message text 02 Message text 03 In my React App how can I do that ??? )

Just need a small example to access this sub-data only. I need to print the above-highlighted text in my ract app.

Advertisement

Answer

Your can access it like this in react app…

YOUR_ARRAY.person.map(firstObject => {
  firstObject.messages.map(secondMessageObject => {
    return <h2>
      {secondMessageObject.message}
    </h2>
  })
})

if it works, kindly accept it as answer here 🙂

User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement