Javascript array not initialized

Question

I have a problem with javascript array when passing into another object array. I have tried everything I came out on net, but nothing is working.

Problem is in line when fetching data from api on dataValues[dataValues.length] = (v.potroseno_tekucine);. Its working with labelValues. When I alert data in loop its ok, but when it needs to be processed it looks like its undefined. But when I, for example, alert(dataValues.length) before var data, its working ok.

$(document).ready(function () {
var ctx = document.getElementById("PodrumarstvoDetalji").getContext("2d");
var labelValues = [];
var dataValues = [];
$.ajax({
    url: root + "api/StatistikaApi/GetPodrumarstvoChart/?vinograd_id=10",// + $("#vinograd_id").val(),
    type: "Get",
    contentType: 'json',
    dataType: 'json',
    success: function (data) {
        $.each(data, function (k, v) {
            labelValues[labelValues.length] = v.opis;
            dataValues[dataValues.length] = (v.potroseno_tekucine);
        });
    },
    error: function (msg) { alert(msg); }
});
var data = {
    labels: labelValues,
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#ddd",
            pointHighlightFill: "#ddd",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: dataValues
        }/*,
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#ddd",
            pointHighlightFill: "#ddd",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }*/
    ]
};


var myLineChart = new Chart(ctx).Line(data);
});

Can anyone help me please? I have tried with push, slice, concat but nothing...

possible duplicate of Returning value from asynchronous JavaScript method? — doldt
– doldt, Commented Jul 14, 2015 at 19:33
One thing I would recommend is using myArr.push(x) instead of myArr[myArr.length] = x. I doubt it makes a difference here but it is a better practice in general. Another possibility is to declare a separate function and call it from the "on success" rather than doing the code directly in there. — nurdyguy
– nurdyguy, Commented Jul 14, 2015 at 19:40
Tried it as well, it didn't help much. Its because code for chart was outside the success function. — Veki
– Veki, Commented Jul 14, 2015 at 19:47

The_Black_Smurf · Accepted Answer · 2015-07-14 19:41:10Z

1

Ajax calls are asynchronous... this mean the data will be set before getting any response from your ajax request.

In order to fix this, you need to create your data in the ajax success callback function:

$.ajax({
    success: function (data) {
        $.each(data, function (k, v) {
            labelValues.push(v.opis);
            dataValues.push(v.potroseno_tekucine);
        });
        var data2 = {
          labels: labelValues,
          //...
        };
        //Insert your logic here to handle data2
    }
});

edited Jul 14, 2015 at 19:41

answered Jul 14, 2015 at 19:34

The_Black_Smurf

5,29714 gold badges58 silver badges80 bronze badges

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

7 Comments

Veki Over a year ago

Why labelValues is ok then? And why is ok when I call alert(dataValues.lenght) or alert(dataValues[0])?

The_Black_Smurf Over a year ago

It's only a matter of when you check those values.

Veki Over a year ago

its checked few lines before out of the success function. I have moved it in success and now its woking ok. Thank you for your help

Michael Geary Over a year ago

@Veki - Don't use alert() for debugging, especially not for debugging asynchronous code, because it changes the timing of operations and can mislead you. Use console.log() and your browser's developer tools instead. Here's an introduction to the Chrome DevTools; other browsers have similar tools.

Veki Over a year ago

I have tried with some console.log() debugging but didnt help me. I will go thru this link. Thank you

|

Collectives™ on Stack Overflow

Javascript array not initialized

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related