Hi folks,
I am trying to map over data from this API
So the json is like this:
{
"disruptionTimeWindow": {
"start": "-271771-04-29T08:07:01.000",
"end": "275760-01-09T19:40:21.000"
},
"disruptions": [
{
"id": "6684_TfWM",
"mode": "BUS",
"disruptionTimeWindow": {
"start": "1567382400000",
"end": "1585699140000"
},
"publicationTimeWindow": {
"start": "1567382400000",
"end": "1585699140000"
},
"disruptionSeverity": "normal",
"title": "Construction for West Midlands Metro extension",
"description": "From<strong> Monday 2nd</strong>&nbsp;<strong>September</strong><br /><br />Due to works on the Five Ways extension of the West Midlands Metro, stops BR5 and BR6, the outbound stop nearest the Five Ways roundabout and the two stops outside the Hilton Garden Inn on Sheepcote Street are now closed, and services using them are diverted.<br /><br /><strong>NXWM 9, 10, 10H, 12, 12A, 13, 13A, 23, 24, 126, X8 and X10</strong> are affected.<br /><br /><strong>From City</strong>&nbsp;all routes <strong>except 10H</strong> towards Harborne or Bearwood, the diversion route will be Sheepcote Street, Grosvenor Street West, Friston Avenue, Ladywood Middleway, Five Ways Island then normal lines of route.<br /><br /><strong>10H</strong> will be diverted from City via Great Charles Street, Parade, Sandpits, Summerhill Road, Ladywood Middleway, Aleston Street then normal line of route.<br /><br /><strong>Towards City</strong> for routes <strong>9, 10, 12, 12A, 13, 13A, 126, X8 and X10</strong> the diversion route will be from Five Ways Island, Broad Street, Ryland Street, Grosvenor Street West, Sheepcote Street then normal line of route.<br /><br /><strong>Towards City</strong> for route <strong>10H 23 &amp; 24</strong> will use normal line of route into the City Centre.&nbsp;<br /><br />Temporary stops out of City will be in place at Sheepcote Street outside The Crescent Theater, Grosvenor Street West and Ladywood Middleway at Five Ways.<br />Temporary stops into City will be in place at Ryland Street/Grosvenor Street West, Greosvenor Street West/Sheepcote Street.",
"lat": 111,
"lon": 222,
"route": null,
"serviceAffected": [
{
"id": "82154",
"operatorCode": "NXB",
"routeDesc": "Queen Elizabeth Hospital to Birmingham",
"serviceNumber": "10h",
"direction": "inbound"
},
],
}
So on and so forth. I have a map function:
{disruptions.length > 0 ? (
disruptions.map(post => {
return (
<div key={post.id}>
<br />
{post.title}
<br />
{post.description}
<br />
{post.disruptionSeverity}
<br />
{post.id}
<br />
{post.title}
<br />
{post.mode}
</div>
);
})
) : (
<div>
<div className="wmnds-loader" />
</div>
)}
Which does output the data:
But I want to try and get the data out of:
"serviceAffected": [
{
"id": "82154",
"operatorCode": "NXB",
"routeDesc": "Queen Elizabeth Hospital to Birmingham",
"serviceNumber": "10h",
"direction": "inbound"
},
],
I’ve seen that someone else in the forum wanted to do the same here and that @camperextraordinaire managed to help them with the solution here:
The question being, how do I map over a map or get the data out of serviceAffected array?!
Thank you,
John.
P.S - I created a sandbox here:
But for some reason the data doesn’t load but I did add Axios as a package!