Split JSON into two arrays gives undefined keys-values
<p>I have a project to do that I create a json object from a database and then I need to get it with the help of ajax and split it into two arrays so I can use the values to create a chart on chart.js.I can get the json object but the problem is that when i try to loop through it to create my two arrays I get undefined values instead of the values that the json contains...It maybe be something really stupid but I still learning so I cant figure it out.I already tried many of the answers that were given in other similar cases but nothing worked.</p>

<p>When I try to run my data.php that creates the json I get this on my browser:</p>

<pre><code>[{"name":"Messenger","number":"29"},{"name":"Viber","number":"28"},{"name":"Facebook","number":"28"},{"name":"Skype","number":"17"}]
</code></pre>

<p>My javascript to get the json,split it into two arrays and create the chart:</p>

<pre><code>$(document).ready(function(){
    $.ajax({
        url: "http://localhost/project_test/data.php",
        method: "GET",
        success: function(data) {
            console.log(data);

            //trying to create the two arrays...
            var applications = [];
            var number = [];

            for(var i in data) {
                applications.push("App name " + data[i]['name']);
                number.push(data[i].number);
            }
            console.log(applications);
            console.log(number);

            //chart.js things....
            var ctx = $("#mycanvas");
            var barGraph = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: applications,
                    datasets: [{
                        label: 'Chart',
                        data: number,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },  
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }               
                        }]
                    }
                }
            });
        },
        error: function(data) {

            console.log(data);
        }
    });
});
</code></pre>

<p>I used both ways ( <code>data[i].name</code> and <code>data[i]['name']</code> ) to get the values but none of them worked.</p>

<p><a href="http://i.stack.imgur.com/siqrH.png" rel="nofollow">my console logs</a></p>