Acess Nested array objects in Json file from react - reactjs

Question

This is my events.json file
events.json
{
"data":
[
{
"slug": 11305,
"slugforurl": "11305-cretech-london",
"summary": "Cretech London ",
"start": {
"minutetimezone": "00"
},
"end": {
"minutetimezone": "00"
},
"areas": [
{
"slug": 27,
"title": "London"
}
],
"country": { "title": "United Kingdom" }
},
{
"slug": 11439,
"slugforurl": "11439-pydata-global-2021-global-online-conference",
"summary": "PyData Global 2021 (GLOBAL ONLINE CONFERENCE)",
"start": {
"minutetimezone": "30"
},
"end": {
"minutetimezone": "30"
},
"areas": [
{
"slug": 62,
"title": "Edinburgh"
}
],
"country": { "title": "United Kingdom" }
},
{
"slug": 11450,
"slugforurl": "11450-stormid-coderdojo-thursday-october-28th",
"summary": "StormID CoderDojo - Thursday October 28th",
"start": {
"minutetimezone": "30"
},
"end": {
"minutetimezone": "00"
},
"venue": {
"slug": 735,
"title": "Storm ID",
"description": "Storm ID Offices",
"address": "43 Constitution Street",
"addresscode": "EH6 7BS",
"lat": "55.9759",
"lng": "-3.1665"
},
"areas": [
{
"slug": 62,
"title": "Edinburgh"
}
],
"country": { "title": "United Kingdom" }
},
{
"slug": 11479,
"slugforurl": "11479-geek-brekky",
"summary": "Geek Brekky",
"start": {
"minutetimezone": "00"
},
"end": {
"minutetimezone": "30"
},
"venue": {
"slug": 380,
"title": "Tamper Sellers Wheel",
"description": "",
"address": "Arundel Street",
"addresscode": "S1 2N",
"lat": null,
"lng": null
},
"areas": [
{
"slug": 40,
"title": "Sheffield"
}
],
"country": { "title": "United Kingdom" }
}```
This is weatherEvents.js file
**WeatherEvents.js**
```import React, { Component } from 'react'
import events from './events.json'
export class WeatherEvents extends Component {
render() {
return (
<div>
<h3>Events with Weather Forecast</h3>
<table>
<thead>
<tr>
<th>#</th>
<th>Name of the Event</th>
<th>City</th>
<th>Weather</th>
</tr>
</thead>
<tbody>
{events.data.map((eve) =>
<tr>
<td>{eve.slug}</td>
<td>{eve.summary}</td>
<td>{eve.areas.map((city,index) =>
<p key={ index}>{ city.title}</p>
)}
</td>
</tr>
)
}
</tbody>
</table>
</div>
)
}
}
Hi,
In the event.json file it shows my json values and in the WeatherEvents.js file it shows the react code. I want to access the title in areas in the events.json file. even I used map() it gives an error. Initially I used map() function to get the inner data and again used map() function to access 'title' inside the areas, for normal nested can used event.country.title it is working properly, but for the areas as it is an array can't access the data. Even though I used map() function it gives tghe following error. Can anyone give me a solution for this.
TypeError: Cannot read properties of undefined (reading 'map')
Thanks

Answer 1

Make sure your JSON data is valid.
You can check the here example with data rendering.
const events = {
"data":
[
{
"slug": 11305,
"slugforurl": "11305-cretech-london",
"summary": "Cretech London ",
"start": {
"minutetimezone": "00"
},
"end": {
"minutetimezone": "00"
},
"areas": [
{
"slug": 27,
"title": "London"
}
],
"country": { "title": "United Kingdom" }
},
{
"slug": 11439,
"slugforurl": "11439-pydata-global-2021-global-online-conference",
"summary": "PyData Global 2021 (GLOBAL ONLINE CONFERENCE)",
"start": {
"minutetimezone": "30"
},
"end": {
"minutetimezone": "30"
},
"areas": [
{
"slug": 62,
"title": "Edinburgh"
}
],
"country": { "title": "United Kingdom" }
},
{
"slug": 11450,
"slugforurl": "11450-stormid-coderdojo-thursday-october-28th",
"summary": "StormID CoderDojo - Thursday October 28th",
"start": {
"minutetimezone": "30"
},
"end": {
"minutetimezone": "00"
},
"venue": {
"slug": 735,
"title": "Storm ID",
"description": "Storm ID Offices",
"address": "43 Constitution Street",
"addresscode": "EH6 7BS",
"lat": "55.9759",
"lng": "-3.1665"
},
"areas": [
{
"slug": 62,
"title": "Edinburgh"
}
],
"country": { "title": "United Kingdom" }
},
{
"slug": 11479,
"slugforurl": "11479-geek-brekky",
"summary": "Geek Brekky",
"start": {
"minutetimezone": "00"
},
"end": {
"minutetimezone": "30"
},
"venue": {
"slug": 380,
"title": "Tamper Sellers Wheel",
"description": "",
"address": "Arundel Street",
"addresscode": "S1 2N",
"lat": null,
"lng": null
},
"areas": [
{
"slug": 40,
"title": "Sheffield"
}
],
"country": { "title": "United Kingdom" }
}
]
}
class WeatherEvents extends React.Component {
render() {
return (
<div>
<h3>Events with Weather Forecast</h3>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>Name of the Event</th>
<th>City</th>
</tr>
</thead>
<tbody border="1">
{events.data.map((eve) =>
<tr>
<td>{eve.slug}</td>
<td>{eve.summary}</td>
<td>{eve.areas.map((city,index) =>
<p key={ index}>{ city.title}</p>
)}
</td>
</tr>
)
}
</tbody>
</table>
</div>
)
}
}
ReactDOM.render(
<WeatherEvents />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>