取得した外部JSONから特定の値を取り出し、想定通りの表示にしたい

#わからないこと・仕様の流れ
1.ボタンをクリックする
↓
2.WebAPIとして多次元配列のJSONデータをajaxにて取得する
↓
3.その中で特定の値を絞り込む
ここでは「りんご」とします。
↓
4.その値に合致したものをHTMLにて表示する
ここのフローで希望する表示にならないので、きちんと表示されるようにしたいです。

filterでの絞りこみがうまくできませんでした。
他にやり方はありますでしょうか？

このようなHTMLの表示にしたいです。

HTML
1<h3>赤</h3>
2<div>
3    <div>
4        <ul>
5        <li>りんご</li>
6        <li>りんごです</li>
7        </ul>
8    </div>
9</div>
10<div>
11    <div>
12        <ul>
13        <li>りんご</li>
14        <li>りんごです</li>
15        </ul>
16    </div>
17</div>

現在の表示はこちらです。重複している<h3>の部分だけ消したいです。

HTML
1<h3>赤</h3>
2<div>
3    <div>
4        <ul>
5        <li>りんご</li>
6        <li>りんごです</li>
7        </ul>
8    </div>
9</div>
10<h3>赤</h3>
11<div>
12    <div>
13        <ul>
14        <li>りんご</li>
15        <li>りんごです</li>
16        </ul>
17    </div>
18</div>

#現在のコード

javascript
1//handleClickという変数に入れる
2//後に書かれているonクリックイベントで以下が発火する
3    var handleClick = function( dataName ){
4        $("#hoge").show();
5
6//data属性を取得
7        var dataName = $(this).data("name");
8//ajaxにてJSONを取得
9        $.ajax({
10                type: 'GET',
11                url: jsonPath,
12                cache: false
13            }).then(function(data){
14
15//JSONの値を検索し、絞り込む
16          var result = [];
17                data.filter(value => {
18                    value.wrap.forEach(key => {
19                        if(key.name === dataName) {
20                            result.push(value);
21                        }
22                    });
23                });
24//検索して絞り込んだ結果をループで表示
25            var h = '';    
26            for(var i in result){
27                        h += '<h3>' + result[i].color + '</h3>';
28                    h += '<div>';
29                    for(var j in jsondata[i].wrap){
30                        h += '<div><ul>';
31                        h += '<li>' + jsondata[i].wrap[j].name + '</li>';
32                        h += '<li>' + jsondata[i].wrap[j].desc + '</li>';
33                        h += '</ul>';
34                        h += '</div>';
35                    }
36                    h += '</div>';
37                }
38        $('#hoge').html(h);
39
40        })
41    }
42//onクリックイベントをそれぞれ指定の値にHTMLへ付与
43    var arr = ["りんご","パイナップル","ぶどう","みかん"];
44    arr.forEach((value) => {
45//上記で書かれたhandleClickを入れる
46    $('[data-name="'+ value +'"]').on('click', handleClick );
47    });
48

APIとして読み込むJSON

json
1
2[
3	{
4		"color": "赤",
5		"wrap": [
6			{
7				"name": "りんご",
8				"desc": "りんごです"
9			}
10		]
11	},
12	{
13		"color": "紫",
14		"wrap": [
15			{
16				"name": "ぶどう",
17				"desc": "ぶどうです"
18			}
19		]
20	},
21	{
22		"color": "赤",
23		"wrap": [
24			{
25				"name": "りんご",
26				"desc": "りんごです"
27			}
28		]
29	},
30]

Yasumichi

2020/05/01 14:50

元々の json に重複があっても一つにしたいということですか？

southern_flavor

2020/05/01 15:24

はい、上記では<h3>の部分だけ消してますが、要は重複があったら削除したいということです。詳しくは追記します。

southern_flavor

2020/05/01 15:58

私の方で一部勘違いしていた箇所があり、今回の質問内容と少し乖離するので新たに立てようと思います。

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

回答1件

ベストアンサー

こうしてみては。

js
1var h = '';
2var pre = '';
3for(var i in result){
4	if ( pre !== result[i].color ) h += '<h3>' + result[i].color + '</h3>';
5	pre = result[i].color;
6	/* 略 */
7}