xxxxxxxxxx<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>EARTHQUAKE!</title> <meta name="description" content="Earthquake data." /> <!-- Open Graph --> <meta property="og:title" content="Earthquakes keep happening." /> <meta property="og:site_name" content="Daily Bruin Online Intern training." /> <!-- CSS --> <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet" type="text/css"> <!-- JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.3/handlebars.js"></script> <script> // execute once my page is loaded $(document).ready(function(){ // make the ajax request $.ajax({ url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson" // process_data is a callback function, the result of the data // is automatically passed in as an argument }).done(process_data); }); function process_data(json_data) { // Check your console to see what gets put there console.log(json_data); // Inspecting that, you can get a sense for the structure of the // JSON file, which should match the documentation here: // https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php // upon inspection, you should see that json_data has a property // "features", which is an array of objects that has data that // looks promising // often times we'll want to process or clean or filter the data // somehow. Here, we're just going to store the features array // into a new dictionary. var earthquake_data = { "earthquakes": json_data.features }; // Now we use handlebars to create our template // This is taken straight from handlebars' website // Uses jquery to select the template (see below) var source = $("#entry-template").html(); // Use handlebars to turn it into a template var template = Handlebars.compile(source); // Now pass the data into the template to generate the html var html_content = template(earthquake_data); // html is now a string with the raw html // we then put that into the earthquake-data div $("#earthquake-data").html(html_content); } // This is a handlebars helper function, just adds one to a value Handlebars.registerHelper("inc", function(value, options){ return parseInt(value) + 1; }); </script> <script id="entry-template" type="text/x-handlebars-template"> {{#each earthquakes}} <div class="row"> <!-- Displaying the index of the data, offset by one Reference: https://stackoverflow.com/questions/22103989/adding-offset-to-index-when-looping-through-items-in-handlebars --> <h3>Earthquake #{{inc @index}}</h3> <ul> <li>Title: {{properties.title}}</li> <li>Longitude: {{geometry.coordinates.[0]}}</li> <li>Latitude: {{geometry.coordinates.[1]}}</li> </ul> </div> {{/each}} </script> </head> <body> <div class="container"> <div id="earthquake-data"> </div> </div> </body></html> https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.3/handlebars.js