0

I have a jQuery store locator file that collect data using JSON, but it keeps giving an error every time I try to load the page.

Uncaught TypeError: Cannot read property '0' of undefined

The line that shows the code is highlighted below 

if(settings.jsonData == true){ dataType = "json"; }
    else{ dataType = "xml"; }

    $.ajax({
    type: "GET",
    url: settings.dataLocation,
    dataType: dataType,
    success: function(data) {

        //After the store locations file has been read successfully
        var i = 0;
    if(settings.jsonData == true)
        {
          //Process JSON
          $.each(data, function() {
            console.log(data);
            var name = this.locname;
            var lat = this.lat;
            var lng = this.lng;
            var address = this.address;
            var address2 = this.address2;
            var city = this.city;
            var postcode = this.postcode;
            var phone = this.phone;
            var web = this.web;
            web = web.replace("http://","");
            var hours1 = this.hours1;
            var hours2 = this.hours2;
            var hours3 = this.hours3;

            var distance = GeoCodeCalc.CalcDistance(orig_lat,orig_lng,lat,lng, GeoCodeCalc.EarthRadiusInMiles);

            //Create the array
            locationset[i] = new Array (distance, name, lat, lng, address, address2, city, postcode, phone, web, hours1, hours2, hours3);

            i++;
          });
        }
        else
        {
          //Process XML
          $(data).find('marker').each(function(){
            //Take the lat lng from the user, geocoded above
            var name = $(this).attr('name');
            var lat = $(this).attr('lat');
            var lng = $(this).attr('lng');
            var address = $(this).attr('address');
            var address2 = $(this).attr('address2');
            var city = $(this).attr('city');
            var postcode = $(this).attr('postcode');
            postcode = postcode.replace(" ","");
            var phone = $(this).attr('phone');
            var web = $(this).attr('web');
            web = web.replace("http://","");
            var hours1 = $(this).attr('hours1');
            var hours2 = $(this).attr('hours2');
            var hours3 = $(this).attr('hours3');

            var distance = GeoCodeCalc.CalcDistance(orig_lat,orig_lng,lat,lng, GeoCodeCalc.EarthRadiusInMiles);

            //Create the array
            locationset[i] = new Array (distance, name, lat, lng, address, address2, city, postcode, phone, web, hours1, hours2, hours3);

            i++;
          });
        }

      //Sort the multi-dimensional array numerically
      console.log(locationset);
      locationset.sort(function(a, b) {
        var x = a[0];
        var y = b[0];
        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
      });

      //Check the closest marker
      **********if(locationset[0][0] > settings.distanceAlert)***********
      {
        alert("Unfortunately, our closest location is more than " + settings.distanceAlert + " miles away.");
      }

even if i try to console.log the locationset, it is blank

EDIT

This is my json code, don't think the header is correct at all

<?php

header('Content-Type: application/json');

$results = mysql_query("SELECT sl_store AS locname, sl_latitude AS lat, sl_longitude AS lng, sl_address AS address, sl_address2 AS address2, sl_city AS city, sl_zip AS postcode, sl_phone AS phone, sl_url AS web, sl_hours AS hours1 FROM `wp_store_locator`");
$rows = array();
while($r = mysql_fetch_assoc($results)) {
$rows[] = $r;
}
echo json_encode($rows);

?>
Shaun Brown
  • 123
  • 2
  • 3
  • 11
  • if it's blank, then something's trashing (or otherwise not building) your locationset array. backtrack your code to see where/what's not working. – Marc B Oct 25 '12 at 14:47
  • Are you correctly setting a JSON header on the server? Maybe if we could see that side of the code we could help a little easier :-) – Alex Oct 25 '12 at 14:47
  • `console.log` the objects `locationset` and `settings` just before the `//Check the closest marker` line of code and see what is being produced. – cube Oct 25 '12 at 15:20
  • locationset is blank, and settings are fine (its just a few settings that were defined at the start of the file). I have placed an alert after the ajax request and that works fine, so it is somewhere in between there. Could it be my json code? – Shaun Brown Oct 25 '12 at 15:25
  • Well, if the `console.log(data);` is coming up empty then the issue is the php code. If `data` is not empty, inspect the JSON that is in `data` and make sure it is valid. You do not need a JSON header type. Your JSON just has to be valid. – cube Oct 25 '12 at 15:34
  • I can use it via XML but I'd rather use JSON. I am using this on a WordPress site and I have just read that it is a lot more complicated than I thought. I'll just have to write the data to an XML file instead, will make it a hell of a lot easier. Cheers :) – Shaun Brown Oct 25 '12 at 15:48
  • A couple of minor things, neither of which is the problem: generally, best practice is to create arrays via the literal, so: `locationset[i] = [distance, name, lat, lng, address, address2, city, postcode, phone, web, hours1, hours2, hours3];`. Also, one of the arguments to `.each` is the index, so you could use that rather than separately tracking `i`. – Heretic Monkey Oct 25 '12 at 15:50

0 Answers0