JSONの値を重複のない一覧で読み込みたい

Question

JSONの値を重複のない一覧で読み込みたい

jQuery,JavaScriptを使用してJSONを読み込み表示したいです。

JSONで管理しているカテゴリーの値の一覧を表示させたい。
カテゴリー1〜カテゴリー4の値の一覧です。

重複のある状態での一覧は読み込みできるんですが
重複項目をフィルタリングができないです。
環境はPHP使用不可環境です。

sample.json

[
  {
    "タイトル": "この文章はダミーです。",
    "キャッチコピー": "この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。",
    "タグ1": "アケビ",
    "タグ2": "アセロラ",
    "タグ3": "アボカド",
    "タグ4": "イチゴ"
  },
    {
    "タイトル": "この文章はダミーです。",
    "キャッチコピー": "この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。",
    "タグ1": "イチジク",
    "タグ2": "ウメ(梅)",
    "タグ3": "アケビ",
    "タグ4": "アセロラ"
  }
]

html JSON読み込み

<div class="categorylist">
	<script type="text/javascript">
		$(function () {
			$.getJSON("../json/sample.json", function (sample_list) {
				for (var i in sample_list) {
					var h =
						'<dd>'
						+ sample_list[i].カテゴリー1
						+ '</dd>'
						+ '<dd>'
						+ sample_list[i].カテゴリー2
						+ '</dd>'
						+ '<dd>'
						+ sample_list[i].カテゴリー3
						+ '</dd>'
						+ '<dd>'
						+ sample_list[i].カテゴリー4
						+ '</dd></dl>';
					$(".categorylist").append(h);
				}
			});
		});
	</script>
</div>

試したこと

一度重複のある一覧で書き出し、jQueryで削除しようとも考えたのですが
動的に追加された要素へのイベント付与が
$(document).on('click'〜
でしか動かず、、、
クリックじゃなく、読み込み時に発火させたらできるのかもと思ってためしたのですが不可能でした。

試した jquery

$(document).on('click', '.categorylist', function(){
  console.clear();
  $(".categorylist dd").filter(function () {
    const t = $(this).text();
    return this !== $(`.categorylist dd:contains('${t}')`).get(0);
  })
  .remove();
});

表示したい一覧

・アケビ
・アセロラ
・アボカド
・イチゴ
・イチジク
・ウメ(梅)

Comments

[maisumakun]

どのように表示したいのですか？

[happy_girl]

ご連絡ありがとうございます。
重複のないの下記ような一覧を表示したいです。
・アケビ
・アセロラ
・アボカド
・イチゴ
・イチジク
・ウメ(梅)

[maisumakun]

カテゴリーは無視でいいのですか？

[happy_girl]

カテゴリーは無視で大丈夫です。
JSONの値の一覧だけを表示させたいのですが、プラグイン等を探してもどうもうまくいかずです。。。

Answer 1

<script>
window.addEventListener('DOMContentLoaded',async()=>{
  const res=await fetch("sample.json")
    .then(x=>x.json())
    .then(x=>[...new Set(x.map(x=>Object.values(x)).flat())]);
  res.forEach(x=>document.querySelector('.categorylist').innerHTML+=`<li>${x}</li>`);
})()
</script>
<div class="categorylist"></div>

Comments

[happy_girl]

ご回答ありがとうございます。
"アケビアセロラアボカドイチゴイチジクウメ(梅)"
のような1つの文章ではなく
htmlタグで囲うような表示がしたいのですが、可能なのでしょうか？

[yambejp]

配列で受け取れていませんか？
それをhtml要素に落とし込むのは楽だとおもいますけど・・・

[happy_girl]

ありがとうございます。
ご回答いただいて恐縮なのですが、

console.log(res);
の部分を
$(".categorylist").append(res);

のようにして確認したのですが、
落とし込み方が間違っているのでしょうか...？

[yambejp]

修正しておきました

[happy_girl]

ありがとうございます！
恐れ入りますが、
下記のようなJSONの場合タグの一覧を読み込むことは可能でしょうか...？

[
{
"タイトル": "この文章はダミーです。",
"キャッチコピー": "この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。",
"タグ1": "アケビ",
"タグ2": "アセロラ",
"タグ3": "アボカド",
"タグ4": "イチゴ"
},
{
"タイトル": "この文章はダミーです。",
"キャッチコピー": "この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。",
"タグ1": "イチジク",
"タグ2": "ウメ(梅)",
"タグ3": "アケビ",
"タグ4": "アセロラ"
}
]

[yambejp]

「タグ」から始まる要素を抜き出せばよいのですか？

[happy_girl]

そうです。
「タグ」から始まる要素を抜き出したいです。
簡易のコンテンツ管理システムのようなページを想定しておりまして、、、

[yambejp]

window.addEventListener('DOMContentLoaded',async()=>{
const res=await fetch("x.json")
.then(x=>x.json())
.then(x=>[...new Set(x.map(x=>Object.entries(x).filter(x=>/^タグ/.test(x[0])).map(x=>x[1])).flat())]);
res.forEach(x=>document.querySelector('.categorylist').innerHTML+=`<li>${x}</li>`);
})()

[happy_girl]

ありがとうございます！！！！
こちらで実現できました！！！

[happy_girl]

すいません。。。
上記IEではうごなかいようでして、、、
IEでも動作する方法はありますでしょうか？

[yambejp]

IEが必須ならjQueryの$.ajaxでぐちゃぐちゃやらないとだめでしょうね

[happy_girl]

ご回答ありがとうございます。
そうなのですね。。。
IEで想定していたので、ふりだしに戻ってしまいました...

[yambejp]

書くのは意外に楽でした。冗長に書いてください
こんな感じです
<script>
$(function(){
$.ajax({
url:'sample.json',
dataType:'json',
}).done(function(data){
var list=[];
for(var i=0;i<data.length;i++){
for(var j in data[i]){
if(/^タグ/.test(j)) list.push(data[i][j]);
}
}
list=list.filter(function(i,j,k){return k.indexOf(i)==j;});
for(var i=0;i<list.length;i++){
$('.categorylist').append($('<li>'+list[i]+'</li>'));
}
});
});
</script>
<ul class="categorylist"></ul>

[yambejp]

ちなみにIE対応は茨の道です。
死ぬ気で学習して自力で解決できるようになっておかないと
どんどん教えてくれる人は減っていきますよ

[happy_girl]

そうなんですね、、、
勉強します！
ありがとうございます！！