Javascript global array undefined

Question

I'm having problems with this javascript code, second alert of (tracking_data) throws 'undefined' like if the variable was deleted or cleared and I don't see any part of the code doing that. I hope you can help me with this. Regards.

var track_id = '';      // Name/ID of the exercise
var watch_id = null;    // ID of the geolocation
var tracking_data = []; // Array containing GPS position objects

$("#startTracking_start").live('click', function () {

// Start tracking the User
watch_id = navigator.geolocation.watchPosition(

    // Success
    function (position) {
        tracking_data.push(position);
        alert(tracking_data);
    },

    // Error
    function (error) {
        console.log(error);
    },

    // Settings
        {frequency: 3000, enableHighAccuracy: true });

    // Tidy up the UI
    track_id = $("#track_id").val();

    $("#track_id").hide();

    $("#startTracking_status").html("Tracking workout: <strong>" + track_id + "</strong>");
});


$("#startTracking_stop").live('click', function(){
    alert(tracking_data);

// Stop tracking the user
navigator.geolocation.clearWatch(watch_id);

// Save the tracking data
window.localStorage.setItem(track_id, JSON.stringify(tracking_data));

// Reset watch_id and tracking_data 
var watch_id = null;
var tracking_data = null;

// Tidy up the UI
$("#track_id").val("").show();

$("#startTracking_status").html("Stopped tracking workout: <strong>" + track_id + "    </strong>");

});

@kennypu the code is pushing data into the array, but when I try to read it from the other function it give me 'undefined' error. — amarruffo
– amarruffo, Commented Jul 13, 2013 at 4:24

Marlon Bernardes · Accepted Answer · 2013-07-13 04:30:18Z

1

Due to hoisting, all var declarations are moved to the top of it's enclosing function. In other words, you're overriding tracking_data inside your function.

Changing from var tracking_data = null; (inside your function) to tracking_data = null; will solve your problem.

The example below reproduces this behaviour:

var v1 = 'hello';
(function(){
  console.log(v1); //prints hello
  v1 = 'hi';
  console.log(v1); //prints hi
})()

.

var v2 = 'hello';
(function(){
  console.log(v2); //prints undefined. Due to hoisting the var v2 was overriden inside this scope. 
  var v2 = 'hi';
  console.log(v2); //prints hi
})()

edited Jul 13, 2013 at 4:30

answered Jul 13, 2013 at 4:21

Marlon Bernardes

13.9k7 gold badges39 silver badges45 bronze badges

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

Comments

Blender · Accepted Answer · 2013-07-13 04:21:29Z

1

By using var tracking_data = null, you make tracking_data local to the click callback. It's not the same tracking_data from the outer scope. Due to JavaScript's variable and function hoisting, the variable declaration is done at the very beginning of the function, which will set tracking_data to undefined.

Get rid of var and on that line (and the line before it) and your code should work as intended.

answered Jul 13, 2013 at 4:21

Blender

300k55 gold badges462 silver badges511 bronze badges

Collectives™ on Stack Overflow

Javascript global array undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related