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 🙂