JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

<div id="list">
</div>

JavaScript

jQuery(document).ready(function($) {
    var url = "http://beta.geogratis.gc.ca/geo/beta/en/loc?q=";

    $.getJSON(url, {
        'q': 'Ottawa',
        format: "json"
    }, function(data) {
        $.each(data.places, function(i, item) {
            item.appendTo("#list");
        });
    });

});
/*
// http://beta.geogratis.gc.ca/geo/beta/en/loc?q=ottawa

{
  "results": {
    "places": [
      {
        "bbox": [
          -80.2267609365392,
          44.431903370138,
          -80.1882390634608,
          44.485874229862
        ],
        "cgndbKey": "FCGFO",
        "concise": "UNP",
        "genericTerm": "Locality",
        "label": "Nottawa, Simcoe, Ontario (Unincorporated area)",
        "latitude": 44.458888848312,
        "location": "Simcoe",
        "longitude": -80.20750001538539,
        "maxx": -80.1882390634608,
        "maxy": 44.485874229862,
        "minx": -80.2267609365392,
        "miny": 44.431903370138,
        "name": "Nottawa",
        "rats": "250000",
        "region": "35",
        "regionAbbr": "ON",
        "url": "http://geonames.nrcan.gc.ca/search/unique_e.php?id=FCGFO&output=xml",
        "uuid": "69da50cfc6cd11d892e2080020a0f4c9"
      },

    $.getJSON(url, {
        'q': 'Ottawa'
    }, function(json) {
        alert("JSON Data: " + json.results[places][0].bbox);
    });

*/