How do I access this json data without a variable to call?

Question

How do I access this json data using this jquery script?

The original script worked with a JSON file in which all the data was nested under "markers:" My JSON isn't nested like that. So I am having trouble figuring out how to access it correctly.

Been tinkering with this and researching other examples, but seems like others are working with a JSON file that is more similar to the original docs.

My Script:

<script type="text/javascript">
        $(function() {
                // Also works with: var yourStartLatLng = '59.3426606750, 18.0736160278';
$('#map_canvas').gmap().bind('init', function() { 
  // This URL won't work on your localhost, so you need to change it
  // see http://en.wikipedia.org/wiki/Same_origin_policy
  $.getJSON( 'http://localhost:3000/locations.json', function(data) { 
    $.each( data, function(marker) {
      $('#map_canvas').gmap('addMarker', { 
        'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
        'bounds': true,
      }).click(function() {
        $('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this);
      });
    });
  });
});
        });
</script>

My JSON:

[
  {
    "id": 2,
    "address": "woo woo woo",
    "latitude": 10.6959353,
    "longitude": -61.13116189999999,
    "url": "locations/2.json"
  },
  {
    "id": 3,
    "address": "hi hi hi",
    "latitude": 20.784575,
    "longitude": -73.9488803,
    "url": "/locations/3.json"
  },
  {
    "id": 4,
    "address": "blah blah balh",
    "latitude": 50.70984199999999,
    "longitude": -72.958056,
    "url": "/locations/4.json"
  }
]

Can you show an example with a json file that works properly? — Mike Furlender
– Mike Furlender, Commented Mar 28, 2014 at 23:52
this is the original file that correctly loads its json. jquery-ui-map.googlecode.com/svn/trunk/demos/… — paris
– paris, Commented Mar 29, 2014 at 0:37

Michael · Accepted Answer · 2014-03-30 17:44:29Z

1

It looks as if you have two problems in your code. First, your function in the $.each callback should accept two parameters, the first of which is the index of the current element in the array:

$.each( data, function(idx, marker) {

Here, marker is not an existing property or requirement in your data or data structure, but rather a placeholder name for the object at position idx in your array. For example, when idx=0, you will find

marker === {
  "id": 2,
  "address": "woo woo woo",
  "latitude": 10.6959353,
  "longitude": -61.13116189999999,
  "url": "locations/2.json"
}

This points to the second problem, which is that the objects in your JSON file don't have a content property, so in the click function marker.content will be undefined.

If that's not enough to get you going, then please provide some more information about the behaviour that you're expecting to see, what's happening instead, any messages that might be appearing in your javascript console, etc.

UPDATE: In response to the comment thread, in addition to the originally missing code, the complete solution also includes not violating the same-origin policy. The JSON file being loaded must be loaded by the browser from the same location as the page containing the script.

edited Mar 30, 2014 at 17:44

answered Mar 29, 2014 at 0:15

Michael

1,48711 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

paris Over a year ago

Okay. I edited it to... code $.each( data, function(i, marker) { the problem is that pins are not appearing on my map based on the JSON data. I'm not getting any errors in the javascript console.

paris Over a year ago

I will add a content field to the json file.

Michael Over a year ago

Have you confirmed that your function is being properly called, and iterating over the objects in your JSON file as you expect? For instance, with console.log(marker.address) after $.each(..., before $('#map_canvas').gmap('addMarker'...

paris Over a year ago

How do I see if it is iterating through my JSON?

Michael Over a year ago

The easiest way is to use the JavaScript console, perhaps by logging a property of the marker object, as in my last comment.

|

Collectives™ on Stack Overflow

How do I access this json data without a variable to call?

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related