JSON内にある特定値の件数または値そのものを重複除去して表示したい

Question

#実現したいこと
JSONにて返ってくる値を次のような出力形式にしたいです。

地方：　東北
現在の表示中の都道府県：　宮城(2件)　秋田（1件）
名物：　牛タン
名物：　気仙沼ホルモン
名物：　きりたんぽ

地方：　関東
現在の表示中の都道府県：　東京（1件）　埼玉（2件）
名物：　東京ばなな
名物：　草加せんべい
名物：　さつまいも料理

JSONはこちらです。

[
	{
		"region": "東北",
		"detail": [
			{
				"pref": "宮城",
				"product": "牛タン"
			},
			{
				"pref": "宮城",
				"product": "気仙沼ホルモン"
			},
			{
				"pref": "秋田",
				"product": "きりたんぽ"
			}
		]
	},
	{
		"region": "関東",
		"detail": [
			{
				"pref": "東京",
				"product": "東京ばなな"
			},
			{
				"pref": "埼玉",
				"product": "草加せんべい"
			},
			{
				"pref": "埼玉",
				"product": "さつまいも料理"
			}
		]
	}
]

#発生しているエラー

Uncaught TypeError: Cannot convert undefined or null to object

#ソースコード
特定のkeyにある件数を取得するために、Object.keys().lengthなども使いましたが、うまくいかなったです。
ソースよりもJSONの形式を直した方が効率が良い等、、アドバイスや解決策等をご教授いただけたら幸いです。

上記出力形式にある「（●件）」というのは配列の中にある特定ワードの件数を自動で取得するようにしたいです。
「現在表示中の都道府県：　」のところは重複を除去したうえでdetail内にあるものをすべて表示したいと思っています。

    const jsonUrl = "json_url";
    function getData(jsonPath = '') {
        return $.ajax({
            type: 'GET',
            url: jsonPath,
            cache: false,
        })
    }
    function shopLoop(jsondata = '') {
        var h = '';
        for(var i in jsondata){

                h += '<h3>地方：' + jsondata[i].region + '</h3>';
                h += '<div>';
                h += '<div>';
                    for(var j in jsondata[i].detail){

                  if ( jsondata[i].detail[j].pref !== -1 ) {
                    h += '<p>現在表示中の都道府県：　' + jsondata[i].detail[j].pref  + '(' + Object.keys( jsondata[i].detail[j].pref ).length + '件)' + '</p>';
                  }
                    h += '<div><ul>';
                    h += '<li>名物：' + jsondata[i].detail[j].shop_name + '</li>';
                    h += '</ul>';
                    h += '</div>';
                }
                h += '</div>';
                h += '</div>';
            }
            $('#hoge').html(h);
        }


        getData(jsonUrl).then( function(data) {
                shopLoop(data);
                });

Comments

[okina]

このエラーはどの部分で発生しているものですか？
Nullか未定義のオブジェクトとのことなので、もっと根本的なことな気もします

[southern_flavor]

エラーに関しては
Object.keys( jsondata[i].detail[j].pref ).length
の箇所で発生しております。
ご回答をいただいたので、解決策がみえてきました。

Answer 1

こんにちは

[
   {
      "pref":"東京",
      "product":"東京ばなな"
   },
   {
      "pref":"埼玉",
      "product":"草加せんべい"
   },
   {
      "pref":"埼玉",
      "product":"さつまいも料理"
   }
]

というJSONがパースされて得られる配列 detail から、以下のような文字列

埼玉(2件) 東京(1件)

を得ることが、ご質問の主題と理解しました。この場合、配列の要素の prefプロパティの値ごとにグルーピングして、かつ、グループごとの件数を数えればよいです。

そこで、まず以下のようなオブジェクト(名前を counts とします）を得ることを考えます。

{ '東京': 1, '埼玉': 2 }

上記を得るために、自力でプログラムを書いてもよいですが、配列やオブジェクトの操作で便利なライブラリの力を借ります。具体的には lodash の _.groupBy と _.mapValues を使います。以下で counts が得られます。

const counts = _.mapValues(_.groupBy(detail, "pref"), 'length');

次に、 counts から、件数の多い順にソートされた、都道府県名と件数のペアの配列 sortedCounts を作ります。それには以下のようにします。

const sortedCounts = Object.entries(counts).sort((e1, e2) => e2[1]-e1[1]);

これで、sortedCounts には以下の配列が得られます。

[ ['埼玉', 2], ['東京', 1] ]

最後に、 sortedCountsを使って、

sortedCounts.map(([pref, count]) => `${pref}(${count}件)`).join(' ');

とすると、

埼玉(2件) 東京(1件)

という文字列が得られます。

以下は上記のコードを関数 function prefsInfo(detail) にまとめたサンプルです。

• 動作確認用サンプル: https://codepen.io/jun68ykt/pen/YzyvEGq?editors=0010

以上、参考になれば幸いです。

追記

「product」の中身が空だった場合、liタグごと削除し、「product」が存在している場合はそのまま表示したいです。

上記の対応として、以下のように、map に与える関数の返り値を作るところで、=> と ｀<li>名物 の間に e.product && を追加してみるといかがでしょうか？

- const items = detail.map(e => `<li>名物: ${e.product}</li>`).join('');
+ const items = detail.map(e => e.product && `<li>名物: ${e.product}</li>`).join('');

Comments

[southern_flavor]

前回に引き続き、たいへん詳しく教えていただきありがとうございます。
Lodash.jsを知らなかったので参考になりました。
想定通りの動きになりました。

すみません、最後にcodepenにあった以下のmap()内部で条件式を使用するにはどのようにしたらよろしいでしょうか？
const items = detail.map(e => `<li>名物: ${e.product}</li>`).join('');

JSONにて、「product」の中身が空だった場合、liタグごと削除し、「product」が存在している場合はそのまま表示したいです。
こちらで書いてみたのですが、何も表示されなくなってしまいます。
const items = detail.map(function(e){
if(e.product) {
'<li>名物: ${e.product}</li>'
}
} ).join('');

[jun68ykt]

コメントありがとうございます。
lodash には多くの便利なメソッドがありますが、いっぺんに覚えようとすると大変なので、
ちょっとずつ今回のご質問のような機会ごとに使い始めていけばよいかと思います。

> JSONにて、「product」の中身が空だった場合、liタグごと削除し、「product」が存在している場合はそのまま表示したいです。

の件ですが、そのコード

const items = detail.map(function(e){
if(e.product) {
'<li>名物: ${e.product}</li>'
}
} ).join('');

だと、map に与えている関数に、returnが書かれていないので、detail の要素個数分の undefined の配列がmapによって作られて、それを空文字列で joinするので、結果として、空文字列になります。

では、どのように修正するかの一例を回答に追記しました。参考になれば幸いです。

[southern_flavor]

最後まで詳しく教えていただき、ありがとうございます！
おかげさまで空の値に対する判定もうまくできました。
まだわからない点はいくつかありますが、ライブラリも調べてやってみます。
ありがとうございました。

[jun68ykt]

どういたしまして????
> おかげさまで空の値に対する判定もうまくできました。
とのことでよかったです????

Answer 2

明確な回答になっていなくてすみません。
参考までに記載いたします。

Lodash.js なんかを使用してみてはいかがでしょうか？

• Lodash.js 公式
• lodash でよく使う王道関数
• lodashでよくつかう関数

_.uniq(array) : 重複排除。
_.size(array) : カウント

Comments

[southern_flavor]

ご回答とアドバイスをいただき、ありがとうございます。
恥ずかしながらそのライブラリは知らなかったので使ってみたいと思います。