JSONを2つの配列に分割すると、未定義のキー値が返される

Question

私はデータベースからjsonオブジェクトを作成するプロジェクトを持っています。そして、それをajaxの助けを得て2つの配列に分割して使用する必要がありますchart.js.Iでグラフを作成する値はjsonオブジェクトを取得できますが、問題は、2つの配列を作成するためにループするときに、jsonに含まれる値の代わりに未定義の値が得られることです。たぶん愚かなものかもしれませんが、まだ学んでいますので、私はそれを理解することができません。私はすでに他の類似のケースで与えられた答えの多くを試しましたが、何も効果がありませんでした。

私は私のブラウザでこれを取得するJSONを作成し、私のdata.php実行しよう：、JSONを取得する二つの配列に分割し、グラフを作成するために、

[{"name":"Messenger","number":"29"},{"name":"Viber","number":"28"},{"name":"Facebook","number":"28"},{"name":"Skype","number":"17"}] 

マイJavaScriptを：

$(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); 
     } 
    }); 
}); 

値を取得するために両方の方法（data[i].nameとdata[i]['name']）を使用しましたが、どちらも機能しませんでした。

my console logs

Answer 1

あなたは、forループの代わりに、ループ内で使用しています。

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

は、あなたがオブジェクトの配列を取得している

for(var i = 0; i < data.length; i++) { 
      applications.push("App name " + data[i]['name']); 
      number.push(data[i].number); 
     } 

Answer 2

でなければなりません。 jQueryを使って、あなたはこのように2列に近づくことができます。

var data = [{"name":"Messenger","number":"29"},{"name":"Viber","number":"28"},{"name":"Facebook","number":"28"},{"name":"Skype","number":"17"}]; 

var names = []; 
var numbers = []; 

$.each(data, function(i, row) { 
    names.push(row.name); 
    numbers.push(row.number); 
}); 

Fiddle