在网页上显示JSON数据

Question

I am trying to use Transport for London's API and display the JSON data on my webpage however it doesnt seem to display it. I have also tried using my API credentials. Console does not show any errors just displays the url.

$(document).ready(function(){

$("#searchButton").on("click", function(){
var tflUrl = "https://api.tfl.gov.uk/Journey/JourneyResults/bethnalgreen/to/liverpoolstreet?mode=bus"
console.log(tflUrl)

$.getJSON(tflUrl, function(json) {

$(".tflResult").html(JSON.stringify(json))

});

});    
});

Answer 1

The "JSON" that "API" returns is not properly encoded so it won't parse. The issue is the data isn't properly espaced and won't parse in JS:

"commonName":"Bethnal Green, Pritchard's Road, Bethnal Green"

The apostrophe should be encoded here.

Here is the full dataset:

'{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationResult, Tfl.Api.Presentation.Entities","toLocationDisambiguation":{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.Disambiguation, Tfl.Api.Presentation.Entities","disambiguationOptions":[{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"51.51750019347,-0.08285910235","uri":"/journey/journeyresults/bethnalgreen/to/51.51750019347,-0.08285910235?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities","url":"https://api-argon.tfl.gov.uk/Place/","commonName":"Liverpool Street, City of London","placeType":"StopPoint","additionalProperties":[],"lat":51.51750019347,"lon":-0.08285910235},"matchQuality":986},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"51.52101317626,-0.07772411809","uri":"/journey/journeyresults/bethnalgreen/to/51.52101317626,-0.07772411809?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities","url":"https://api-argon.tfl.gov.uk/Place/","commonName":"City of London, Tune Liverpool Street","placeType":"PointOfInterest","additionalProperties":[],"lat":51.52101317626,"lon":-0.07772411809},"matchQuality":965},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"1000138","uri":"/journey/journeyresults/bethnalgreen/to/1000138?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.StopPoint, Tfl.Api.Presentation.Entities","naptanId":"HUBLST","modes":["national-rail","tube","overground","bus","coach","replacement-bus","tflrail"],"icsCode":"1000138","stopType":"stop","url":"https://api-argon.tfl.gov.uk/StopPoint/HUBLST","commonName":"Liverpool Street, Liverpool Street Station","placeType":"StopPoint","additionalProperties":[],"lat":51.51781287197,"lon":-0.08218294727},"matchQuality":959},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"1015153","uri":"/journey/journeyresults/bethnalgreen/to/1015153?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.StopPoint, Tfl.Api.Presentation.Entities","naptanId":"HUBLST","modes":["bus"],"icsCode":"1015153","stopType":"stop","url":"https://api-argon.tfl.gov.uk/StopPoint/HUBLST","commonName":"Liverpool Street, Eldon Street /Liverpool Street","placeType":"StopPoint","additionalProperties":[],"lat":51.51839724312,"lon":-0.08492584276},"matchQuality":948},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"51.51769534227,-0.0821446437","uri":"/journey/journeyresults/bethnalgreen/to/51.51769534227,-0.0821446437?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities","url":"https://api-argon.tfl.gov.uk/Place/","commonName":"City of London, TfL Visitor Centre, Liverpool Street","placeType":"PointOfInterest","additionalProperties":[],"lat":51.51769534227,"lon":-0.0821446437},"matchQuality":940},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"51.51770550624,-0.0822162845","uri":"/journey/journeyresults/bethnalgreen/to/51.51770550624,-0.0822162845?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities","url":"https://api-argon.tfl.gov.uk/Place/","commonName":"City of London, Burger King, Liverpool Street Station","placeType":"PointOfInterest","additionalProperties":[],"lat":51.517705506240006,"lon":-0.0822162845},"matchQuality":939},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"51.51908544097,-0.08136554673","uri":"/journey/journeyresults/bethnalgreen/to/51.51908544097,-0.08136554673?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities","url":"https://api-argon.tfl.gov.uk/Place/","commonName":"City of London, Burger King, Liverpool Street Station Kiosk","placeType":"PointOfInterest","additionalProperties":[],"lat":51.51908544097,"lon":-0.08136554673},"matchQuality":933},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"51.51874772782,-0.08161036183","uri":"/journey/journeyresults/bethnalgreen/to/51.51874772782,-0.08161036183?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities","url":"https://api-argon.tfl.gov.uk/Place/","commonName":"City of London, NHS Walk-In Centre, Liverpool Street Station","placeType":"PointOfInterest","additionalProperties":[],"lat":51.51874772782,"lon":-0.081610361829999992},"matchQuality":932}],"matchStatus":"list"},"fromLocationDisambiguation":{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.Disambiguation, Tfl.Api.Presentation.Entities","disambiguationOptions":[{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"1000022","uri":"/journey/journeyresults/1000022/to/liverpoolstreet?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.StopPoint, Tfl.Api.Presentation.Entities","naptanId":"940GZZLUBLG","modes":["tube","bus","coach"],"icsCode":"1000022","stopType":"stop","url":"https://api-argon.tfl.gov.uk/StopPoint/940GZZLUBLG","commonName":"Bethnal Green, Bethnal Green","placeType":"StopPoint","additionalProperties":[],"lat":51.52710314157,"lon":-0.05493455245},"matchQuality":984},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"51.52650082239,-0.06418670266","uri":"/journey/journeyresults/51.52650082239,-0.06418670266/to/liverpoolstreet?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities","url":"https://api-argon.tfl.gov.uk/Place/","commonName":"Bethnal Green Road, Stepney (London)","placeType":"StopPoint","additionalProperties":[],"lat":51.52650082239,"lon":-0.06418670266},"matchQuality":960},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"51.52977938554,-0.05960706757","uri":"/journey/journeyresults/51.52977938554,-0.05960706757/to/liverpoolstreet?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities","url":"https://api-argon.tfl.gov.uk/Place/","commonName":"Old Bethnal Green Road, Stepney (London)","placeType":"StopPoint","additionalProperties":[],"lat":51.52977938554,"lon":-0.05960706757},"matchQuality":949},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"51.5270728127,-0.06125029806","uri":"/journey/journeyresults/51.5270728127,-0.06125029806/to/liverpoolstreet?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities","url":"https://api-argon.tfl.gov.uk/Place/","commonName":"Tower Hamlets, Bethnal Green Road Market","placeType":"PointOfInterest","additionalProperties":[],"lat":51.527072812700006,"lon":-0.06125029806},"matchQuality":945},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"1001023","uri":"/journey/journeyresults/1001023/to/liverpoolstreet?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.StopPoint, Tfl.Api.Presentation.Entities","naptanId":"910GBTHNLGR","modes":["national-rail","overground"],"icsCode":"1001023","stopType":"stop","url":"https://api-argon.tfl.gov.uk/StopPoint/910GBTHNLGR","commonName":"Bethnal Green, Bethnal Green Rail Station","placeType":"StopPoint","additionalProperties":[],"lat":51.52378864542,"lon":-0.0600491541},"matchQuality":943},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"51.52813445728,-0.05367957787","uri":"/journey/journeyresults/51.52813445728,-0.05367957787/to/liverpoolstreet?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities","url":"https://api-argon.tfl.gov.uk/Place/","commonName":"London, Bethnal Green Police Station","placeType":"PointOfInterest","additionalProperties":[],"lat":51.528134457280004,"lon":-0.05367957787},"matchQuality":941},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"1011243","uri":"/journey/journeyresults/1011243/to/liverpoolstreet?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.StopPoint, Tfl.Api.Presentation.Entities","naptanId":"490G00011243","modes":["bus"],"icsCode":"1011243","stopType":"stop","url":"https://api-argon.tfl.gov.uk/StopPoint/490G00011243","commonName":"Bethnal Green, Pritchard's Road, Bethnal Green","placeType":"StopPoint","additionalProperties":[],"lat":51.53187814676,"lon":-0.0614498438},"matchQuality":937},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"51.52364456767,-0.0747734603","uri":"/journey/journeyresults/51.52364456767,-0.0747734603/to/liverpoolstreet?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities","url":"https://api-argon.tfl.gov.uk/Place/","commonName":"Tower Hamlets, Barclays Cycle Hire Bethnal Green Road","placeType":"PointOfInterest","additionalProperties":[],"lat":51.523644567670004,"lon":-0.074773460300000011},"matchQuality":930},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"1006411","uri":"/journey/journeyresults/1006411/to/liverpoolstreet?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.StopPoint, Tfl.Api.Presentation.Entities","naptanId":"490G00006411","modes":["bus"],"icsCode":"1006411","stopType":"stop","url":"https://api-argon.tfl.gov.uk/StopPoint/490G00006411","commonName":"Shoreditch (London), Shoreditch High St / Bethnal Green Road","placeType":"StopPoint","additionalProperties":[],"lat":51.524322297030004,"lon":-0.077166704329999988},"matchQuality":929},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"51.52636378674,-0.06079026185","uri":"/journey/journeyresults/51.52636378674,-0.06079026185/to/liverpoolstreet?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities","url":"https://api-argon.tfl.gov.uk/Place/","commonName":"Tower Hamlets, Weavers Adventure Playground, Bethnal Green","placeType":"PointOfInterest","additionalProperties":[],"lat":51.52636378674,"lon":-0.06079026185},"matchQuality":929},{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.DisambiguationOption, Tfl.Api.Presentation.Entities","parameterValue":"51.525688332,-0.05529758618","uri":"/journey/journeyresults/51.525688332,-0.05529758618/to/liverpoolstreet?mode=bus","place":{"$type":"Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities","url":"https://api-argon.tfl.gov.uk/Place/","commonName":"Tower Hamlets, Barclays Cycle Hire Bethnal Green Garden","placeType":"PointOfInterest","additionalProperties":[],"lat":51.525688332,"lon":-0.05529758618},"matchQuality":929}],"matchStatus":"list"},"viaLocationDisambiguation":{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.Disambiguation, Tfl.Api.Presentation.Entities","matchStatus":"empty"},"recommendedMaxAgeMinutes":1440,"searchCriteria":{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.SearchCriteria, Tfl.Api.Presentation.Entities","dateTime":"2017-01-24T14:42:00","dateTimeType":"Departing"},"journeyVector":{"$type":"Tfl.Api.Presentation.Entities.JourneyPlanner.JourneyVector, Tfl.Api.Presentation.Entities","from":"bethnalgreen","to":"liverpoolstreet","via":"","uri":"/journey/journeyresults/bethnalgreen/to/liverpoolstreet?mode=bus"}}'