【JS】配列にデータを追加したいです。

前提・実現したいこと

現在、開発をしているのです配列にデータを追加したいですが、方法がわかりません。

現在以下のような配列があります。

var dataArray = [['Age','Weight']];

こちらを

dataArray = [
          ['Age','Weight'],
　　　　　　[2200,2],
　　　　　　[2400,0],
          [2600,2]...
]

のように後から追加したいです。
ちなみに追加するデータはjsonファイルからの値になります。

該当のソースコード

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" content="">
    <title>google-chart</title>
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" ></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    
    <!-- スクリプト部分 -->
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
 
      function drawChart() {
      var dataArray = [['Age','Weight']];
      var df = $.Deferred();
 
      $(function() {
          $.ajax({
          data: 'post',
          url: 'http://localhost:3000/result/11094000',
          dataType : 'json',
          }).done(function(data){
              console.log("success");
              console.log(data);
              var data_item = [data.breaks,data.count];
              dataArray.push(data_item);
              console.log(data_item);
              df.resolve();
          $(data).each(function(){
          });
          }).fail(function(){
          console.log("error");
          });
      });
 
      df.done(function(){
      var chartdata = google.visualization.arrayToDataTable(dataArray);
               
      var options = {
              title: 'Age vs. Weight comparison',
              hAxis: {title: 'Age', minValue: 0, maxValue: 15},
              vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
              legend: 'none'
          };
          var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
          chart.draw(chartdata, options);
      });
      }
    </script> 
  </head>
  
  <!-- HTML部分 -->
  <body>
    
    <h1>jsonファイルから表示</h1>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
 
  </body>
</html>

JSON
1JSON
2{
3  "result": [
4    {
5      "id": 11094000,
6      "name": "テスト",
7      "breaks": [
8        2200,
9        2400,
10        2600,
11        2800,
12        3000,
13        3200,
14        3400,
15        3600,
16        3800,
17        4000,
18        4200,
19        4400,
20        4600,
21        4800,
22        5000,
23        5200,
24        5400,
25        5600,
26        5800,
27        6000,
28        6200,
29        6400,
30        6600,
31        6800,
32        7000,
33        7200,
34        7400,
35        7600,
36        7800,
37        8000,
38        8200,
39        8400,
40        8600
41      ],
42      "count": [
43        2,
44        0,
45        2,
46        1,
47        4,
48        9,
49        17,
50        10,
51        21,
52        26,
53        30,
54        51,
55        39,
56        38,
57        33,
58        38,
59        45,
60        46,
61        38,
62        32,
63        49,
64        27,
65        42,
66        23,
67        14,
68        17,
69        21
70      ]
71    },
72    {
73      "id": 11094001,
74      "name": "テスト2",
75      "breaks": [
76        2200,
77        2400,
78        2600,
79        2800,
80        3000,
81        3200,
82        3400,
83        3600,
84        3800,
85        4000,
86        4200,
87        4400,
88        4600,
89        4800,
90        5000,
91        5200,
92        5400,
93        5600,
94        5800,
95        6000,
96        6200,
97        6400,
98        6600,
99        6800,
100        7000,
101        7200,
102        7400,
103        7600,
104        7800,
105        8000,
106        8200,
107        8400,
108        8600
109      ],
110      "count": [
111        2,
112        0,
113        2,
114        1,
115        4,
116        9,
117        17,
118        10,
119        21,
120        26,
121        30,
122        51,
123        39,
124        38,
125        33,
126        38,
127        45,
128        46,
129        38,
130        32,
131        49,
132        27,
133        42,
134        23,
135        14,
136        17,
137        21
138      ]
139    }
140  ]
141}

試したこと

dataArray.push()などしてみたのですが、反映がされません。
dataArray.push(data_item);では
[Array(33), Array(27)]きちんと格納できている事が確認されています。
あとはdataArrayに追加したいです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

yambejp

2021/03/31 05:48

もどってくるJSONはどういった形なのでしょうか？

nekoniki

2021/03/31 05:48

> ちなみに追加するデータはjsonファイルからの値になります。具体的にどんなjsonデータになるのでしょうか？

toyamal

2021/03/31 05:55

JSONを追記しました。

yambejp

2021/03/31 05:57

JSONを見る限りどの部分が [0,2000],[2,4000],[5,6000] にあたるのかわかりません。說明をお願いします

toyamal

2021/03/31 06:01

申し訳ございません！修正致しました。

nekoniki

2021/03/31 06:03

breaksとcountを先頭から順番にまとめていくという認識であってますか？その場合、breaksとcountの要素数が合わない場合(質問文中でも33件と27件となってます)はどう処理する想定でしょうか？

yambejp

2021/03/31 06:04

breakとcountの組み合わせを流し込む感じですかね？配列の中にオブジェクトが２つありますがどうするつもりでしょうか？

toyamal

2021/03/31 06:07

[breaks,count] [breaks,count] のように流し込んでいきたいです。

行動規範の内容に同意します

回答2件

仮に

var newArray = {
  "result": [
   ・・・・
]}

として

javascript
1var obj=newArray.result;
2obj.forEach(x=>{
3  x.breaks.forEach((y,z)=>dataArray.push([y,x.count[z]]));
4});
5console.log(dataArray);

投稿2021/03/31 06:12

yambejp

総合スコア116724

yambejp

2021/03/31 06:13

breakとcountの要素数が違うのでちゃんと取れないですけどね・・・

toyamal

2021/03/31 06:46

ありがとうございます！助かりました！

行動規範の内容に同意します

ベストアンサー

[breaks,count]
[breaks,count]
のように流し込んでいきたいです。

とりあえずcountの方がbreaksに比べて要素数が少ないと仮定して書いてみました。

js
1var dataArray = [['Age','Weight']];
2// 途中略
3// dataは{breaks : [...], count: [...]}の構造？？
4var data_item = data.count.map((c, i) => {
5  return [data.breaks[i], c]; 
6});
7
8dataArray.push(...data_item);