JSFiddle - React, Tailwind, and code Playground
HTML
<div id="bussen"></div>
JavaScript
// noprotect
var json= [
{
"id":"1",
"longitude":"4.420556809486086",
"latitude":"51.21703476701095",
"description":"Station van Mechelen",
"busnummer":"14",
"name":"Station Mechelen",
"busuur":"14:45",
"bussen":[
{
"busnummer":"530",
"busnaam":"Aarshot - Tremelo - Keerbergen - Mechelen",
"bushaltes":[
{
"bushalte":"Zandpoortvest",
"aankomstuur":"17:40"
},
{
"bushalte":"Raghenoplein",
"aankomstuur":"17:45"
},
{
"bushalte":"Station perron 13",
"aankomstuur":"17:52"
}
]
},
{
"busnummer":"55",
"busnaam":"Test - Test - Test",
"bushaltes":[
{
"bushalte":"Test 1",
"aankomstuur":"16:40"
},
{
"bushalte":"Test 2",
"aankomstuur":"16:45"
},
{
"bushalte":"Test 3 perron 13",
"aankomstuur":"16:52"
}
]
}
]
},
{
"id":"2",
"longitude":"4.421180",
"latitude":"51.216227",
"description":"Station van Mechelen",
"busnummer":"180",
"name":"Station antwerpen",
"busuur":"14:45",
"bussen":[
{
"busnummer":"630",
"busnaam":"Busnaam 1 ID 2",
"bushaltes":[
{
"bushalte":"dafas",
"aankomstuur":"14:40"
},
{
"bushalte":"fadas",
"aankomstuur":"14:45"
},
{
"bushalte":"afdas perron 13",
"aankomstuur":"14:52"
}
]
},
{
"busnummer":"660",
"busnaam":"Busnaam 2 ID 2",
"bushaltes":[
{
"bushalte":"Test 1",
"aankomstuur":"13:40"
},
{
"bushalte":"Test 2",
...