Question

我已经将一些JSON数据导入到控制台，并且试图将少量的JSON数据显示在文档中。这是我拥有的数据的一个示例：

   {"hours":[{"airTemperature":[{"source":"sg","value":14.03},{"source":"noaa","value":8.06},{"source":"dwd","value":14.03}],"time":"2018-09-29T00:00:00+00:00","waveHeight":[{"source":"sg","value":0.44},{"source":"meto","value":1.28},{"source":"meteo","value":0.44},{"source":"noaa","value":0.78},{"source":"dwd","value":0.63}]},{"airTemperature":[{"source":"sg","value":13.61},{"source":"noaa","value":8.12},{"source

数据链接到我在地图上的标记，并且我试图将一些数据放入在html文件中设置的文本区域中。例如，我想遍历数据并每隔六个小时从noaa获取airTemp和waveHeight的所有值。尽管我知道我需要循环才能做到这一点，但就我的技能而言，我还是碰壁了一点，并努力在我可以理解的任何地方找到参考。任何朝着正确方向的指针都将不胜感激。到目前为止，这是我的js：

            // create locations coordinates offshore close to named town to get marine information for that area.
    var locations = [
        ["Penzance", 50.070092, -5.767671],
        ["St Ives", 50.250562, -5.491298],
        ["Newquay", 50.440782, -5.126195],
        ["Bude", 50.802900, -4.614876],
        ["Woolacombe", 51.166777, -4.344528]
    ];


  //set parameters for api information we need
    const params = 'waveHeight,airTemperature';




//initiate map
    function initMap() {

        var map = new google.maps.Map(document.getElementById('map-canvas'), {
            zoom: 9,
            center: { lat: 50.738, lng: -4.002  }
        });




        // Info Window initialize
        var infoWindow = new google.maps.InfoWindow(),
            marker, i;


        // marker icon
        var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
        //set markers on map
        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: { lat: locations[i][1], lng: locations[i][2] },
                map: map,
                title: locations[i][0],
                icon: image
            });


// gets relevant api data when offshore marker is clicked
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    fetch(`https://api.stormglass.io/point?lat=${locations[i][1]}&lng=${locations[i][2]}&params=${params}`, {
                        headers: {
                            'Authorization': 'MY_ACCESS_KEY'
                        }
                    }).then(function(response) {
                        return response.json();
                    }).then(function(data) {
                        console.log(data);


                      document.getElementById("waves").innerHTML = data;
                    });

                    infoWindow.setContent(locations[i][0]);
                    infoWindow.open(map, marker);

                };


            })(marker, i));


        }

}



initMap();

如何遍历JSON数据

0 个答案: