多次元配列JSONから取得した値の絞り込みがうまくいかない

#実現したいこと
次のようなJSONがあるとします。

JSON
1[
2	{
3		"color": "果物",
4		"wrap": [
5			{
6                "color": "赤",
7				"name": "りんご",
8				"desc": "りんごです"
9			},
10            {
11                "color": "赤",
12				"name": "いちご",
13				"desc": "いちごです"
14			},
15			{
16                "color"　:　"黄色",
17				"name": "グレープフルーツ",
18				"desc": "グレープフルーツです"
19			},
20			{
21                "color"　:　"緑",
22				"name": "マスカット",
23				"desc": "マスカットです"
24			}
25		]
26	},
27	{
28		"type": "野菜",
29		"wrap": [
30			{
31                "color": "紫", 
32				"name": "なす",
33				"desc": "なすです"
34			},
35			{
36                "color": "緑",
37				"name": "ピーマン",
38				"desc": "ピーマンです"
39			},
40			{
41                "color": "緑",
42				"name": "きゅうり",
43				"desc": "きゅうりです"
44			},
45			{
46                "color"　:　"黄色",
47				"name": "パプリカ",
48				"desc": "パプリカです"
49			}
50		]
51	},
52	{
53		"type": "肉",
54		"wrap": [
55			{
56                "color": "赤",
57				"name": "牛肉",
58				"desc": "牛肉です"
59			},
60			{
61                "color": "赤",
62				"name": "豚肉",
63				"desc": "豚肉です"
64			}
65		]
66	},
67]
68

colorの「緑」という値を完全一致で絞り込み、次のような表示にしたいです。

果物
マスカット
マスカットです

野菜
ピーマン
ピーマンです
きゅうり
きゅうりです

#起こっている問題

APIとしてJSONデータを取得し、「緑」を絞りこみます。
すると、他の値までまるごと引っ張ってきてしまい、次のような形になってしまいます。

果物
りんご
りんごです
いちご
いちごです
グレープフルーツ
グレープフルーツです
マスカット
マスカットです

野菜
なす
なすです
ピーマン
ピーマンです
きゅうり
きゅうりです
パプリカ
パプリカです

野菜
なす
なすです
ピーマン
ピーマンです
きゅうり
きゅうりです
パプリカ
パプリカです

##コード
filterでの絞りこみに問題があるのか、ループ部分に問題があるのか、、。
現状のコードから、解決策がないでしょうか？

javascript
1$.ajax({
2    type: 'GET',
3    url: jsonPath,
4    cache: false
5}).then(function(data){
6
7//多次元配列JSONより「緑」を取り出し
8var result = [];
9data.filter(value => {
10    value.wrap.forEach(key => {
11        if(key.color === '緑') {
12            result.push(value);
13        }
14    });
15});
16
17//「緑」に該当する部分を取得したresultをループ表示
18var h = '';
19for(var i in result){
20    h += '<h3>' + result[i].type + '</h3>';
21    h += '<div>';
22    for(var j in result[i].wrap){
23        h += '<div>';
24        h += '<ul>';
25        h += '<li>' + result[i].wrap[j].name + '</li>';
26        h += '<li>' + result[i].wrap[j].desc + '</li>';
27        h += '</ul>';
28        h += '</div>';
29    }
30    h += '</div>';
31}
32$('#hoge').html(h);
33
34});

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

回答1件

ベストアンサー

こんにちは

現状のコードから、解決策がないでしょうか？

現状のコードと同じように filter を使って、resultを作る一例を回答します。

javascript
1//多次元配列JSONより「緑」を取り出し
2var result = data.map(
3  ({ type, wrap }) => ({ type, wrap: wrap.filter(({ color }) => color === "緑")})
4).filter(({ wrap }) => wrap.length);