Question

道歉这个问题有多简单。

我有来自Citymapper API的链接：

https://developer.citymapper.com/api/1/traveltime/?startcoord=51.513895%2C+0.021222&endcoord=51.524006%2C+-0.115490&key=8b3e89fd32441463296274661805caba

当我指向浏览器时，它给了我：

{“travel_time_minutes”：51，“diagnostic”：{“milliseconds”：3036}}

我正试图从中抽出一件物品; “51”。

然后我想在html网页上显示它：“51分钟工作”

我知道这很简单，但我无法解决任何有关如何处理此问题的文档。

Answer 1

试试这个：

<强> JavaScript的：

$.get('https://developer.citymapper.com/api/1/traveltime/?startcoord=51.513895%2C+0.021222&endcoord=51.524006%2C+-0.115490&key=8b3e89fd32441463296274661805caba').done(function(data) {
    $('#ElementToDisplayIn').html(data.travel_time_minutes+' minutes to work.');
});

由于您已使用jQuery标记了该问题，因此我使用jQuery's $.get method。您正在使用的API是后退JSON，jQuery会自动将其转换为JavaScript对象。

请求成功后，我将标识为ElementToDisplayIn的元素的html设置为您请求的字符串。变量data是从API返回的内容，并且其中包含所有信息。

例如，要访问我可以执行的data.diagnostic.milliseconds毫秒，这将在您的示例中吐出3036。

希望这会让你开始！

Answer 2

您可以使用jQuery $.ajax函数。

var url = 'https://developer.citymapper.com/api/1/traveltime/?startcoord=51.513895%2C+0.021222&endcoord=51.524006%2C+-0.115490&key=8b3e89fd32441463296274661805caba';


$.ajax({
  method: 'GET',
  url: url,
  dataType: 'jsonp',    
  crossDomain: true,
  success: function(data){
    $('.data').html(data.travel_time_minutes + ' minutes to work');
  }        
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="data"></div>

NOOB：解析API数据并输出一个项目

2 个答案: