在网页上显示 JSON 数据答案

【问题标题】：Displaying JSON data on webpage在网页上显示 JSON 数据
【发布时间】：2017-01-24 14:35:05
【问题描述】：

我正在尝试使用 Transport for London 的 API 并在我的网页上显示 JSON 数据，但它似乎没有显示它。我也尝试过使用我的 API 凭据。控制台不显示任何错误，只显示 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))

});

});    
});

【问题讨论】：

“不起作用”不是错误消息。请详细说明您遇到的任何控制台错误和/或任何意外行为

标签： javascript jquery json ajax api

【解决方案1】：

“API”返回的“JSON”未正确编码，因此无法解析。问题是数据没有正确分隔并且不会在 JS 中解析：

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

撇号应该在这里编码。

这是完整的数据集：

'{"$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"}}'

【讨论】：

...这是有效的 JSON。尝试通过 linter 运行它。 URL 不需要转义，除非它们使用反斜杠。
所以是 url 的问题？ @埃里克
哎呀，这是一个未编码的 apos，而不是 url，Mike 对反斜杠的看法是正确的。
我该怎么做才能解决这个问题？
我会从 curl/PHP 中获取该字符串，对其进行正确编码，然后将其输出到前端。