【JS,jQuery】配列の形式を変更したいのです。

Question

前提・実現したいこと

GoogleChartで使用しているデータとして※1の配列を使用しているのですが
想像していたヒストグラムは表示されずどうやら※2の形式にしないと意図したグラフにならないようです。
そこで質問なのですが、※2のような配列を作成するにはどのような方法がありますでしょうか？
人数と点数はMySQLのデータベースで保持しているためHTMLを直接いじるわけにもいかないです。
JSもしくはjQueryを使用して実現したいです。
人数と点数のデータ数は必ず同じ数が保存されています。

※1

['人数', '点数'],
 ['2', 12.1],
 ['3', 9.1],
 ['3', 12.2]

※2

['点数'],
[12.1],
[12.1],
[9.1],
[9.1],
[9.1],
[12.2],
[12.2],
[12.2]

試したこと

人数のデータと点数のデータをかければいいのかなと思ったのですが、全然自分自身ではわからなかったので質問させて頂きました。

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

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

Comments

[m.ts10806]

既に出ている回答が何もヒントにならないなら単なる丸投げ作業依頼と認識します。

Answer 1

var a=[
  ['人数', '点数'],
  ['2', 12.1],
  ['3', 9.1],
  ['3', 12.2],
  ];
// var b=a.map((x,y)=>y==0?[x]:Array(Number(x[0])).fill(x)).flat();
var b=a.map((x,y)=>y==0?[x]:Array(Number(x[0])).fill(null).map(_=>x)).flat();
console.log(b);

※一部修正

Comments

[root_jp]

横からすみません。いつも勉強させてもらっています。

これ、なぜ修正したのか参考までに教えていただけませんか？
修正前のものでも問題なさそうな気がして、ものすごく気になっています。
fillに配列を渡すと具合悪くなる時がある感じですか？

[root_jp]

fillに配列やオブジェクトを渡すと、全ての位置に同じインスタンスが設定されるんですね。
調べてると、多分これを考慮されたのかと推測しました。
確かにレコード数分インスタンスはあるべきだと思いますので。

[yambejp]

fillで非リテラルなオブジェクトを指定すると独立したデータでなくなるんですよね
古い方のソースで
a[1][0]="hoge";
console.log(b);
とするとaへの修正がbに影響するのがわかります

[root_jp]

全部、書き換わっちゃいますね。
今回も勉強になりました。ありがとうございます。

[hiro_app]

いつもお世話になっております。
今回も勉強になりました！

Answer 2

新しい配列に生成し直すのが単純で解りやすいかと思います。

どこでそういう動きをしているかは、各行にconsole.logを追加してご確認ください。

before = [
    ['人数', '点数'],
    ['2', 12.1],
    ['3', 9.1],
    ['3', 12.2]
];
after = [];
console.log(before);
after.push(before.shift()[1]); // 先頭はカラム名なので削除＆afterへ「点数」のみ移動
$.each(before, function (index, value) {
    for (cnt = 0; cnt < value[0]; cnt++) {
        after.push(value[1]);
    }
});
console.log(after);

Comments

[tanakamaro]

ありがとうございます！
少し勘違いしていまして、以下の形式にしたい場合はどのようなソースで実現することが出来ますでしょうか？

['人数', '点数'],
['2', 12.1],
['2', 12.1],
['3', 9.1],
['3', 9.1],
['3', 9.1],
['3', 12.2],
['3', 12.2],
['3', 12.2]

[hiro_app]

配列が理解できていないということでしょうか？
提示したコードのどこがわかりませんか？
命令について１つ１つ調べて、各行が何を実行しているか理解すれば、すでに今回提示したコードが新しく希望したものとほぼほぼ同じであることが解るかと思います。
キーボードを数回押すだけで修正できますよ？
すでに指摘されているようですが、作業の丸投げをされていると、私も判断することになるかもしれません。

Answer 3

※１から※２に変換したいってことですか？
あまりスマートなやり方が思いつきませんでしたが、参考になれば。

const src = [
 ['人数', '点数'],
 ['2', 12.1],
 ['3', 9.1],
 ['3', 12.2]
];

const score = [src[0][1]];
src.forEach(record => {
  for (let i = 0; i < record[0]; i++) {
    score.push(record[1]);
  }
});

console.log(score); // ["点数", 12.1, 12.1, 9.1, 9.1, 9.1, 12.2, 12.2, 12.2]

Comments

[tanakamaro]

ありがとうございます！
少し勘違いしていまして、以下の形式にしたい場合はどのようなソースで実現することが出来ますでしょうか？

['人数', '点数'],
['2', 12.1],
['2', 12.1],
['3', 9.1],
['3', 9.1],
['3', 9.1],
['3', 12.2],
['3', 12.2],
['3', 12.2]