React - Access JSON array data and its sub data

Question

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.

GeekyCode · Accepted Answer · 2022-04-23 21:20:35Z

1

That might help if you provided an example of the code you currently have. But you might need to do something like this.

  person.messages.map(item => {
    return <span>{item.message}</span>
  })

answered Apr 23, 2022 at 21:20

GeekyCode

2651 silver badge10 bronze badges

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

Comments

Zulfiqar Ali · Accepted Answer · 2022-04-23 20:45:38Z

0

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

answered Apr 23, 2022 at 20:45

Zulfiqar Ali

2972 gold badges3 silver badges13 bronze badges

Collectives™ on Stack Overflow

React - Access JSON array data and its sub data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related