使用AJAX呼叫来调用Transport for London Open API空气质量数据?

时间:2019-06-25 15:23:23

标签: jquery html

我正在尝试使用伦敦交通(TFL)开放API解析空气质量数据。我已经使用以下代码

将该API用于公交线路和路线:

        function getTimes(){

            $.ajax({
                type: 'GET',
                url: 'https://api-ganges.tfl.gov.uk/Line/64/Arrivals?app_id=XXXXX&app_key=XXXXX',
                dataType: 'json',

                success: function(data){
                    $("#times").html("");

                    // declare a variable called sorted
                    var sorted = data.sort(function(a,b){
                        if (a.timeToStation > b.timeToStation){
                            return 1;
                        }
                        if (a.timeToStation < b.timeToStation){
                            return -1;
                        }
                        return 0;
                    });
                    $.each(data, function(key, value){
                        var line = value.lineName;
                        var stopName = value.stationName;
                        var destination = value.destinationName;
                        var time = value.timeToStation;
                        time = parseInt(time/60);
                        time < 1 ? time = "due" : time = time+" min";
                        $("#times").append(line+" "+stopName+"-"+destination+" "+time+"<br>");


                    });
                }
            });

        }

这是在按下按钮时调用的,并返回公共汽车路线和时间的列表,直到它们到达为止。

到目前为止,我已经尝试使用以下代码:

        function getAirQuality(){

            $.ajax({
                type: 'GET',
                url: 'https://api-ganges.tfl.gov.uk/AirQuality?app_id=XXXXX&app_key=XXXXX',
                dataType: 'json',

                success: function(data){


                    $.each(data, function(key, value){
                        console.log(data)
                        var array = [];
                        var summary = value;




                        //var text = value.currentForecast;

                        $("#air").append(summary);


                    });
                }
            });

        }

我只能让它打印“值” 如果我console.log(data)我发现有一个名为currentForecast的对象,但是如果将其添加到我的代码中,则在按下按钮时它不会显示任何内容。

完整代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JSSample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>

<div id="times">Times</div>
<button onclick="getTimes();">Click to get times</button>
<div id="air">Air Quality forecast summary:</div>
<button onclick="getAirQuality();">Click to get Air Quality</button>
<script>





        function getTimes(){

            $.ajax({
                type: 'GET',
                url: 'https://api-ganges.tfl.gov.uk/Line/64/Arrivals?app_id=XXXXX&app_key=XXXXX',
                dataType: 'json',

                success: function(data){
                    $("#times").html("");

                    // declare a variable called sorted
                    var sorted = data.sort(function(a,b){
                        if (a.timeToStation > b.timeToStation){
                            return 1;
                        }
                        if (a.timeToStation < b.timeToStation){
                            return -1;
                        }
                        return 0;
                    });
                    $.each(data, function(key, value){
                        var line = value.lineName;
                        var stopName = value.stationName;
                        var destination = value.destinationName;
                        var time = value.timeToStation;
                        time = parseInt(time/60);
                        time < 1 ? time = "due" : time = time+" min";
                        $("#times").append(line+" "+stopName+"-"+destination+" "+time+"<br>");


                    });
                }
            });

        }



        function getAirQuality(){

            $.ajax({
                type: 'GET',
                url: 'https://api-ganges.tfl.gov.uk/AirQuality?app_id=XXXXX&app_key=XXXXX',
                dataType: 'json',

                success: function(data){


                    $.each(data, function(key, value){
                        console.log(data)
                        var array = [];
                        var summary = value;




                        //var text = value.currentForecast;

                        $("#air").append(summary);


                    });
                }
            });

        }



</script>
</body>
</html>

我希望“空气质量”按钮至少可以作为启动器显示我的物体内部至少是什么

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>   <!--  HERE IS THE ANSWER YOU ARE LOOKING FOR  -->
<html>
<head>
    <meta charset="UTF-8">
    <title>Air Qualily</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>

<div id="air">Air Quality forecast summary:</div>
<button onclick="getAirQuality();">Click to get Air Quality</button>
<script>

function getAirQuality(){

    $.ajax({
        type: 'GET',
        url: 'https://api-ganges.tfl.gov.uk/AirQuality',
        dataType: 'json',

        success: function(data){

            var summary = data.currentForecast[0].forecastText;
            //remove strange characters
            summary = summary.replace(/&lt;/g, '<');  
            summary = summary.replace(/&gt;/g, '>');
 
            console.log(summary);

            $("#air").append(summary);            
        }
    });
}

</script>
</body>
</html>