title: Split JSON into two arrays gives undefined keys-values
body: <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>