Retrieve data from JSON URL to be shown on HTML view

Question

Question

based on GoogleMap Javascript API documentation, im trying to create a earthquake map by using a JSON url that provided by USGS inside Laravel 5 Framework. And now from the JSON url link

I want retrieve some data like Long, Lat, place, and mag to be shown on the Bootstrap table below.

How can i retrieve all the data so it can be shown on the table ?

Javascript to create GoogleMap

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map-container'), {
      zoom: 2,
      center: {lat: -33.865427, lng: 151.196123},
      mapTypeId: 'terrain'
    });

    // Create a <script> tag and set the USGS URL as the source.
    var script = document.createElement('script');

    // This example uses a local copy of the GeoJSON stored at
    // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
    // https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js
    //https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson


    script.src = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojsonp';
    document.getElementsByTagName('head')[0].appendChild(script);

    map.data.setStyle(function(feature) {
      var magnitude = feature.getProperty('mag');
      return {
        icon: getCircle(magnitude)
      }
    });    
}

function getCircle(magnitude) {
  return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: .2,
    scale: Math.pow(2, magnitude) / 2,
    strokeColor: 'white',
    strokeWeight: .5
  };
}

function eqfeed_callback(response) {
  map.data.addGeoJson(response);
}

HTML Table

the html table is using Bootstrap4

<div class="row">
        <div class="card table-card">
            <table class="table">
                <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Long</th>
                    <th scope="col">Lat</th>
                    <th scope="col">Mag</th>
                    <th scope="col">Location Name</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>1</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>2</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>3</td>
                    <td>@twitter</td>
                </tr>
                </tbody>
            </table>
        </div>
</div>