Jsonデータから特定のデータのみを抽出させて表示させる方法

今回はJsonデータから特定のデータのみを抽出させたい場合の方法を紹介します。

では早速いきたいと思います。

特定のjsonデータを抽出

たとえば下記のデータがあるとします。

データ

<script id="json_category_data">
[
	{
		"category":"01",
		"name":"カテゴリ01",
		"img":""
	},
	{
		"category":"0101",
		"name":"カテゴリ0101",
		"img":"https://placehold.jp/150x150.png"
	},
	{
		"category":"0102",
		"name":"カテゴリ0102",
		"img":"https://placehold.jp/150x150.png"
	},
	{
		"category":"010201",
		"name":"カテゴリ010201",
		"img":""
	}
]
</script>

上記のデータからcategoryの数値が4桁かつ「01」で始まる数値のデータを抽出したいと思います。

categoryの数値が4桁かつ「01」で始まる数値という条件にあうデータはいくつあるでしょうか？

いったん考えてみましょう。

答えはcategoryの数値が4桁かつ「01」で始まる数値の条件にあてはまるデータはcategoryが「0101」と「0102」の2つのデータになります。

それではその2つのデータを抽出してhtmlで出力する方法を紹介していきます。

html

<div class="category-list-json" data-category="01">
	<div class="js-dynamic-category">
		<ul class="block-dynamic-category-inner"></ul>
	</div>
</div>

js

jQuery(function () {
	var dataCategoryNum = jQuery('.category-list-json').attr('data-category');
	var json = JSON.parse(jQuery('#json_category_data').text());

	var getnumberCategoryLength = 4; //取得したい数値の桁数
	var getnumberCategorySlice= 2; //上から2桁の数値と一致させるための設定
	parentMenu(json,dataCategoryNum,getnumberCategoryLength,getnumberCategorySlice);
});

function parentMenu(json,dataCategoryNum,getnumberCategoryLength,getnumberCategorySlice) {
		
	for (var i=0;i<json.length;i++) {
		var numberCategory = json[i].category;
		var numberCategoryLength = numberCategory.length;
		var numberCategorySlice = numberCategory.slice(0,getnumberCategorySlice);
		var numberCategoryName = json[i].name;
		var numberCategoryImg = json[i].img;
		if((numberCategoryLength == getnumberCategoryLength) && (numberCategorySlice == dataCategoryNum)) {
			jQuery('.block-dynamic-category-inner').append('<li class="category-item" data-category="'+ numberCategory +'"><a href="/'+ numberCategory +'/"><figure><img src="' + numberCategoryImg + '"></figure><span>'+ numberCategoryName +'</span></a></li>'); 
		}
	}
}

サンプル