Getting data from http api and displaying in frontend

Noob question incoming regarding API
I have an API http link that contains realtime information of how many minutes are left until next subway train leaves the station.
I would like to pull the data from this file and display it in some sort of list in the front end (possible later on set up a screen in the hallway that can display the data through MQTTT).

So the HTTP link displays the code like this:

{"StatusCode":0,"Message":null,"ExecutionTime":109,"ResponseData":{"LatestUpdate":"2017-03-18T11:18:27","DataAge":18,"Metros":[{"GroupOfLine":"tunnelbanans blå linje","DisplayTime":"3 min","TransportMode":"METRO","LineNumber":"11","Destination":"Akalla","JourneyDirection":1,"StopAreaName":"Näckrosen","StopAreaNumber":3221,"StopPointNumber":3221,"StopPointDesignation":"1","TimeTabledDateTime":"2017-03-18T11:21:45","ExpectedDateTime":"2017-03-18T11:21:47","JourneyNumber":30302,"Deviations":null},{"GroupOfLine":"tunnelbanans blå linje","DisplayTime":"7 min","TransportMode":"METRO","LineNumber":"11","Destination":"Kungsträdgården","JourneyDirection":2,"StopAreaName":"Näckrosen","StopAreaNumber":3221,"StopPointNumber":3222,"StopPointDesignation":"2","TimeTabledDateTime":"2017-03-18T11:25:00","ExpectedDateTime":"2017-03-18T11:26:04","JourneyNumber":30029,"Deviations":null},{"GroupOfLine":"tunnelbanans blå linje","DisplayTime":"13 min","TransportMode":"METRO","LineNumber":"11","Destination":"Akalla","JourneyDirection":1,"StopAreaName":"Näckrosen","StopAreaNumber":3221,"StopPointNumber":3221,"StopPointDesignation":"1","TimeTabledDateTime":"2017-03-18T11:31:45","ExpectedDateTime":"2017-03-18T11:31:45","JourneyNumber":30304,"Deviations":null},{"GroupOfLine":"tunnelbanans blå linje","DisplayTime":"11:35","TransportMode":"METRO","LineNumber":"11","Destination":"Kungsträdgården","JourneyDirection":2,"StopAreaName":"Näckrosen","StopAreaNumber":3221,"StopPointNumber":3222,"StopPointDesignation":"2","TimeTabledDateTime":"2017-03-18T11:35:00","ExpectedDateTime":"2017-03-18T11:35:00","JourneyNumber":30030,"Deviations":null},{"GroupOfLine":"tunnelbanans blå linje","DisplayTime":"11:41","TransportMode":"METRO","LineNumber":"11","Destination":"Akalla","JourneyDirection":1,"StopAreaName":"Näckrosen","StopAreaNumber":3221,"StopPointNumber":3221,"StopPointDesignation":"1","TimeTabledDateTime":"2017-03-18T11:41:45","ExpectedDateTime":"2017-03-18T11:41:45","JourneyNumber":30306,"Deviations":null},{"GroupOfLine":"tunnelbanans blå linje","DisplayTime":"11:45","TransportMode":"METRO","LineNumber":"11","Destination":"Kungsträdgården","JourneyDirection":2,"StopAreaName":"Näckrosen","StopAreaNumber":3221,"StopPointNumber":3222,"StopPointDesignation":"2","TimeTabledDateTime":"2017-03-18T11:45:00","ExpectedDateTime":"2017-03-18T11:45:00","JourneyNumber":30031,"Deviations":null}],"Buses":[{"GroupOfLine":null,"TransportMode":"BUS","LineNumber":"515","Destination":"Sundbybergs station","JourneyDirection":1,"StopAreaName":"Näckrosen","StopAreaNumber":50407,"StopPointNumber":50407,"StopPointDesignation":null,"TimeTabledDateTime":"2017-03-18T11:18:00","ExpectedDateTime":"2017-03-18T11:18:00","DisplayTime":"11:18","JourneyNumber":20337,"Deviations":null},{"GroupOfLine":null,"TransportMode":"BUS","LineNumber":"515","Destination":"Odenplan","JourneyDirection":2,"StopAreaName":"Näckrosen","StopAreaNumber":50407,"StopPointNumber":50408,"StopPointDesignation":null,"TimeTabledDateTime":"2017-03-18T11:24:00","ExpectedDateTime":"2017-03-18T11:24:00","DisplayTime":"11:24","JourneyNumber":20367,"Deviations":null},{"GroupOfLine":null,"TransportMode":"BUS","LineNumber":"515","Destination":"Sundbybergs station","JourneyDirection":1,"StopAreaName":"Näckrosen","StopAreaNumber":50407,"StopPointNumber":50407,"StopPointDesignation":null,"TimeTabledDateTime":"2017-03-18T11:33:00","ExpectedDateTime":"2017-03-18T11:33:00","DisplayTime":"11:33","JourneyNumber":20364,"Deviations":null},{"GroupOfLine":null,"TransportMode":"BUS","LineNumber":"515","Destination":"Odenplan","JourneyDirection":2,"StopAreaName":"Näckrosen","StopAreaNumber":50407,"StopPointNumber":50408,"StopPointDesignation":null,"TimeTabledDateTime":"2017-03-18T11:39:00","ExpectedDateTime":"2017-03-18T11:39:00","DisplayTime":"11:39","JourneyNumber":20388,"Deviations":null},{"GroupOfLine":null,"TransportMode":"BUS","LineNumber":"515","Destination":"Sundbybergs station","JourneyDirection":1,"StopAreaName":"Näckrosen","StopAreaNumber":50407,"StopPointNumber":50407,"StopPointDesignation":null,"TimeTabledDateTime":"2017-03-18T11:48:00","ExpectedDateTime":"2017-03-18T11:48:00","DisplayTime":"11:48","JourneyNumber":20385,"Deviations":null}],"Trains":[],"Trams":[],"Ships":[],"StopPointDeviations":[{"StopInfo":{"StopAreaNumber":3221,"StopAreaName":"Näckrosen","TransportMode":"METRO","GroupOfLine":"tunnelbanans blå linje"},"Deviation":{"Text":"Korta tåg. Gå mot mitten av plattformen. *** Short trains. Continue to the middle of the platform. ","Consequence":null,"ImportanceLevel":2}}]}}

I am mostly interested in the “Destination”:“Kungsträdgården” and “DisplayTime”:“x min”
So I would like to have a list of:

Kungsträdgården: 3 min
Kungsträdgården: 7 min
Kungsträdgården: 13 min

Akalla: 3 min
Akalla: 7 min
Akalla: 13 min

I am fiddling around with the rest platform but can´t get it to work.
Could someone please help me point me in the right direction?

Anyone? feels like im close since I have all the data in the http, just need to make it visable…

Hello Kimpan,

Did you manage to get the info from the API?

Thanks

Did you get anywere with this? Facing the same thing for a simular http response.