How do I Loop through JSON data

Question

I've imported some JSON data to my console and I'm trying to display a small amount of it to the document. This is an example of the data I have:

   {"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 

The data is linked to markers I have on a map and I am trying to get some of the data into a text area I have setup in my html file. for example I want to iterate through the data and get all the values from the noaa for both the airTemp and the waveHeight every sixth hour. Although I know I need a loop to do this I've hit a bit of a brick wall as far as my skills are concerned and struggling to find a reference anywhere that I can make sense of. Any pointers in the right direction are greatly appreciated. Here is my js so far:

            // 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();