javascript scope issue causing infinite loop

javascript scope issue causing infinite loop

I am trying to make and ajax call 30 times but this is resulting in an
infinite loop. It is certainly a scope issue relating to the data array
but cant seem to track it down.
var data = [], totalPoints = 30;
function getData() {
var value = 0.0;
if (data.length > 0)
data = data.slice(1);
url = "some/url"
while (data.length < totalPoints) {
$.getJSON(url, {metric_name : "someMetric"})
.done(function(json ) {
value = json;
console.log(value);
data.push(value.metricValue);
});
}
}