配列構造のJSONデータの参照の仕方

JavaScriptで下記のような配列構造のJSONデータが格納されている変数($response)があり、
この中から「zhin_cd」のデータのみを取得したい場合、$response[i].zhin_cdのようにしてループ処理で1件づつ取得して配列に入れることはできるのですが、ループせずに一括してzhin_cdの列の情報を取得することはできますでしょうか。

[
{"s_year":2018,"zhin_cd":"AAAA","sum_suryo":"962"},
{"s_year":2017,"zhin_cd":"BBBB","sum_suryo":"2884"},
{"s_year":2016,"zhin_cd":"CCCC","sum_suryo":"3054"},
{"s_year":2015,"zhin_cd":"DDDD","sum_suryo":"2692"},
{"s_year":2014,"zhin_cd":"EEEE","sum_suryo":"3517"}
]

最終的にやりたいことは、chart.jsでグラフを描画したいのですが、
下記コードの「⇐ここにJSONで取得した？列目のデータ」部分にJSONデータをセットしたいのですが、やり方がわからため、いったん配列に読み込ませ配列をchart.jsにセットしようとしている。(可能であればJSONの2列目を直接渡せるようにしたい)

Javascript
1  var myChart = new Chart(ctx, {
2    type: 'bar',
3    data: {
4      labels: ⇐ここにJSONで取得した1列目のデータ,
5      datasets: [
6        {
7          label: '売上合計金額',
8          data: array03,
9          backgroundColor: "rgba(153,255,51,0.4)",
10          yAxisID: "y-axis-1",
11        },
12        {
13          type: 'line',
14          label: '粗利率',
15          data: ⇐ここにJSONで取得した2列目のデータ
16          backgroundColor: "rgba(255, 0, 0, 0.51)",
17          borderColor : "#ff0000",
18          borderWidth : "1",
19          pointBackgroundColor : "#ff0000",
20          yAxisID: "y-axis-2",
21          lineTension: 0,
22          fill: false,
23        },
24      ]
25    },
26    options: complexChartOption,
27  });

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

回答3件

ループせずに一括してzhin_cdの列の情報を取得することはできますでしょうか。

内部的にはループさせつつ取り出すしかありませんが、見た目をすっきりさせるためには.mapなども使えます。

javascript
1const arr = [/* 略 */];
2console.log(arr.map(item => item.zhin_cd));

投稿2018/11/29 05:26

maisumakun

総合スコア145183

susumu_0414

2018/11/29 07:50

回答ありがとうございます。やはりループはしないといけないのですね。了解しました。

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

ベストアンサー

1行目がlabels、2行目がdata.datasets[1].dataですか？
3行目以降は要るの？捨てるの？

仕様が定まってないから回答出来ないみたいな状態になってるんじゃないですか？
きちんと、A→Bを描きましょう。

お小言は以上で、どうするべきかを踏まえてアドバイス。
JavaScriptの配列操作は弱いのでLodashを使いましょう。

Lodashの何が凄いかというと、チェーン記法というやり方を採用しており、
少ないコード量でA→Bを定義するだけで、まるで工場でプレス作業をしていくかの如く、配列の各要素を修正して、必要なデータ形式に加工することが可能です。

こういったやり方をリスト操作と言って、
JavaScriptにもmapやreduceというメソッドを使った手法で加工していくことは出来るのですが、
いかんせん機能が少なく貧弱です。

百聞は一見にしかず、コード見たほうが威力がわかると思います。

JavaScript
1var seed = [
2  {"s_year":2018,"zhin_cd":"AAAA","sum_suryo":"962"},
3  {"s_year":2017,"zhin_cd":"BBBB","sum_suryo":"2884"},
4  {"s_year":2016,"zhin_cd":"CCCC","sum_suryo":"3054"},
5  {"s_year":2015,"zhin_cd":"DDDD","sum_suryo":"2692"},
6  {"s_year":2014,"zhin_cd":"EEEE","sum_suryo":"3517"}
7];
8result = _.chain(seed)
9  .tail()
10  .map(it => ({
11    type: 'line',
12    label: '粗利率',
13    data: it.zhin_cd,
14    backgroundColor: "rgba(255, 0, 0, 0.51)",
15    borderColor : "#ff0000",
16    borderWidth : "1",
17    pointBackgroundColor : "#ff0000",
18    yAxisID: "y-axis-2",
19    lineTension: 0,
20    fill: false,
21  }))
22  .thru(its => [{
23    label: '売上合計金額',
24    data: 'array03',
25    backgroundColor: "rgba(153,255,51,0.4)",
26    yAxisID: "y-axis-1",
27  }, ...its])
28  .value();

このコードをtry lodash - CodePenに貼り付けて確認すると結果はこうなります。

JSON
1[
2   {
3      "label": "売上合計金額",
4      "data": "array03",
5      "backgroundColor": "rgba(153,255,51,0.4)",
6      "yAxisID": "y-axis-1"
7   },
8   {
9      "type": "line",
10      "label": "粗利率",
11      "data": "BBBB",
12      "backgroundColor": "rgba(255, 0, 0, 0.51)",
13      "borderColor": "#ff0000",
14      "borderWidth": "1",
15      "pointBackgroundColor": "#ff0000",
16      "yAxisID": "y-axis-2",
17      "lineTension": 0,
18      "fill": false
19   },
20   {
21      "type": "line",
22      "label": "粗利率",
23      "data": "CCCC",
24      "backgroundColor": "rgba(255, 0, 0, 0.51)",
25      "borderColor": "#ff0000",
26      "borderWidth": "1",
27      "pointBackgroundColor": "#ff0000",
28      "yAxisID": "y-axis-2",
29      "lineTension": 0,
30      "fill": false
31   },
32   {
33      "type": "line",
34      "label": "粗利率",
35      "data": "DDDD",
36      "backgroundColor": "rgba(255, 0, 0, 0.51)",
37      "borderColor": "#ff0000",
38      "borderWidth": "1",
39      "pointBackgroundColor": "#ff0000",
40      "yAxisID": "y-axis-2",
41      "lineTension": 0,
42      "fill": false
43   },
44   {
45      "type": "line",
46      "label": "粗利率",
47      "data": "EEEE",
48      "backgroundColor": "rgba(255, 0, 0, 0.51)",
49      "borderColor": "#ff0000",
50      "borderWidth": "1",
51      "pointBackgroundColor": "#ff0000",
52      "yAxisID": "y-axis-2",
53      "lineTension": 0,
54      "fill": false
55   }
56]

1行目はlabelsで使うのでtailでふっとばして、残りをオブジェクトに変換、頭に1行目用のデータをくっつけて、ざっとこんなもんですね。
こういう事がしたいんじゃないかなというものを作って見ましたがどうでしょうか？

チェーン記法は途中で行が挟めないので、console.logで値が確認出来ないから心配だわ…と思いませんか？
lodashにはtapというメソッドが用意されており、.tap(console.log)を挟めば確認出来ます。

JavaScript
1result = _.chain(seed)
2  .tail()
3  .tap(console.log) // この時点の情報をconsoleに表示したい
4  .map(it => ({
5    type: 'line',
6    label: '粗利率',
7    data: it.zhin_cd,
8    backgroundColor: "rgba(255, 0, 0, 0.51)",
9    borderColor : "#ff0000",
10    borderWidth : "1",
11    pointBackgroundColor : "#ff0000",
12    yAxisID: "y-axis-2",
13    lineTension: 0,
14    fill: false,
15  }))
16  .thru(its => [{
17    label: '売上合計金額',
18    data: 'array03',
19    backgroundColor: "rgba(153,255,51,0.4)",
20    yAxisID: "y-axis-1",
21  }, ...its])
22  .value();

投稿2018/11/29 05:53

miyabi-sun

総合スコア21158

susumu_0414

2018/11/29 09:16

私には高度すぎて・・・ちょっとついていけてません。「Lodash」「map」など新しいキーワードが出てきましたので、自分なりに一度調べてみたいと思います。いきなり、高い壁が出てきてひるんでいます。。。

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

$responseってあるんで、ajaxで取ってきてるんですよね？
jsは配列処理などは弱いしそこが膨らむと可読性も悪くなります。

自分がjs側で使いたい形式のデータ（zhin_cdだけの配列？仕様がわかりませんが）
をPHP側で作って$responseに入れるのはダメなんですか？
[response]
[data]
[
{"s_year":2018,"zhin_cd":"AAAA","sum_suryo":"962"},
{"s_year":2017,"zhin_cd":"BBBB","sum_suryo":"2884"},
{"s_year":2016,"zhin_cd":"CCCC","sum_suryo":"3054"},
{"s_year":2015,"zhin_cd":"DDDD","sum_suryo":"2692"},
{"s_year":2014,"zhin_cd":"EEEE","sum_suryo":"3517"}
]
[zhin_cd_data]
{"AAAA":BBBB,"CCCC":"DDDD","EEEE"},