I am currently working on a web application project that involves bus timetables. My goal is to display the timetable data in a table using dropdown menus populated with JSON information. While I believe I have tackled the JSON aspect correctly, I am facing challenges when it comes to parsing the data so that the table can accurately show arrival times for selected buses and stops.
The process should be straightforward: first select the bus number, then choose the bus stop, and finally the correct timetable will be displayed below in the table.
Here is the HTML select section:
Bus No.: <select ng-model="selectedNr" ng-options="x for (x,y) in busData"></select>
Stop name: <select ng-model="selectedStop" ng-options="x for (x,z) in selectedNr.stops"></select>
Next, we have the table formatting:
<table class="time-table">
<tr ng-repeat="time in busData[selectedNr].stops[selectedStops].time">
<th>{{time.hour}}</th>
<td ng-repeat="minute in time.minutes">{{minute}}</td>
</tr>
Further down, we look at the Angular framework part:
app.controller("ngCtrl", function ($scope) {
"use strict";
$scope.busData = {
"bus1":{
"id":1,
"stops":{
"stop1":{
"id":1,
"stopName":"stop1",
"time":[
{
"hour": 1,
"minutes": [11, 21,31,41,51]
},
{
"hour": 2,
"minutes": [12, 22,32,42,52]
}
]
},
"stop2":{
"id":2,
"stopName":"stop2",
"time":[
{
"hour": 3,
"minutes": [11, 21,31,41,51]
},
{
"hour": 4,
"minutes": [12, 22,32,42,52]
}
]
}
}
}, (and so on...)
Check out the live demo on Plunker