JSONから特定のワードで該当する最初のグループのみ表示させ、falseの結果を非表示にしたい

Question

やりたいこと

JSONでの取得してからの出力結果をこちらの意図したように表示したいです。

次のような形です。

1. 下記JSON内のdetailが該当するキーワードが複数存在する場合、最初の1グループだけを表示

下記JSONを例にすると「東北」ですと、このような結果になります。

宮城(2件)　秋田（1件）

宮城が最初にきていますので、これで宮城のグループだけ表示したいです。

牛タン
デリバリー可
ghutan.com

気仙沼ホルモン
EC販売
kesennuma.com

一番最後に希望の出力形式を記載します。

2. 下記JSON内のdetaiが1件のみ場合はdetail内のprefで表示されるものを要素ごと非表示したが、結果でfalseと表示されてしまう
（下記JSONで例えると「region: 関西」です）
です。

1.は調べてもやり方がまったくわからない状態なので、教えていただけたら幸いです。
2.「false」と表示されてしまいます。これを消すにはどうしたらいいでしょうか？


現在作業中のコード・取得したJSONとそこから得られる結果を記載します。
コードについては先日、こちらへ別件で質問した際にいろいろ教えていただいたものを少し変えています。
[リンク内容](https://teratail.com/questions/260771)


```javascript
const jsonPath = path;
  $.ajax({
    type: 'GET',
    url: jsonPath,
    cache: false,
    success: shopLoop,
  });

function prefsInfo(detail) {
        const counts = _.mapValues(_.groupBy(detail, "pref"), 'length');
        const sortedCounts = Object.entries(counts).sort((e1, e2) => e2[1]-e1[1]);
        return sortedCounts.map(([pref, count]) => (sortedCounts.length !== 1) && `<li data-name="${pref}">${pref}(${count}件)</li>`).join(' ');
      }
      
      function shopLoop(jsondata) {
        const regionsHtml = jsondata.map( ({ region, detail },i) => {
        const prefs = prefsInfo(detail);

        const items = detail.map( e => 
        `<div>
           <ul>
           <li>${e.product}</li>
           <li>${e.type}</li>
           </ul>
            <div>
             <a href="${e.url}"><img src="./store_shop_ico.png" alt="" srcset="">${e.url}</a>
           </div>
           </div>
           `
           ).join('');

          var h = `<h2>${region}</h2>`
                +  `<div>`
                + `<ul class="hoge-${i++}">${prefs}</ul>`
                    + `${items}`
                + `</div>`;
          return h;
        });

        $('#hoge-list').html(regionsHtml);
      }

[
    {
        "region": "東北",
        "detail": [
            {
                "pref": "宮城",
                "product": "牛タン",
                "url": "ghutan.com",
                "type": "デリバリー可"
            },
            {
                "pref": "宮城",
                "product": "気仙沼ホルモン",
                "url": "kesennuma.com",
                "type": "EC販売"
            },
            {
                "pref": "秋田",
                "product": "きりたんぽ",
                "url": "kiritanpo.com",
                "type": "EC、デリバリー可"
            }
        ]
    },
    {
        "region": "関東",
        "detail": [
            {
                "pref": "東京",
                "product": "東京ばなな1",
                "url": "tokyobanana1.com",
                "type": "EC販売"
            },
            {
                "pref": "東京",
                "product": "東京ばなな2",
                "url": "tokyobanana2.com",
                "type": "デリバリー販売"
            },
            {
                "pref": "埼玉",
                "product": "草加せんべい",
                "url": "sokasenbei.com",
                "type": "デリバリー可"
            },
            {
                "pref": "埼玉",
                "product": "さつまいも料理",
                "url": "satsumaimo.com",
                "type": "テイクアウト可"
            }
        ]
    },
    {
        "region": "関西",
        "detail": [
            {
                "pref": "大阪",
                "product": "たこやき",
                "url": "takoyaki.com",
                "type": "テイクアウト可、EC販売"
            }
        ]
    }
]

このようになります。

HTML

<h2>東北</h2>
<div>
    <ul class="hoge-0">
        <li>宮城(2件)</li>
        <li>秋田（1件）</li>
    </ul>
    <div>
        <ul>
            <li>牛タン</li>
            <li>デリバリー可</li>
        </ul>
        <div>
        <a href="ghutan.com"><img src="./store_shop_ico.png" alt="" srcset="">ghutan.com</a>
        </div>
    </div>
    <div>
        <ul>
            <li>気仙沼ホルモン</li>
            <li>EC販売</li>
        </ul>
        <div>
            <a href="ghutan.com"><img src="./store_shop_ico.png" alt="" srcset="">ghutan.com</a>
        </div>
    </div>
    <div>
        <ul>
            <li>きりたんぽ</li>
            <li>EC、デリバリー可</li>
        </ul>
        <div>
            <a href="kiritanpo.com"><img src="./store_shop_ico.png" alt="" srcset="">kiritanpo.com</a>
        </div>
    </div>
</div>


<h2>関東</h2>
<div>
    <div>
    <ul class="hoge-1">
        <li>東京（２件）</li>
        <li>埼玉（2件）</li>
    </ul>
    <div>
        <ul>
            <li>東京ばなな1</li>
            <li>EC販売</li>
        </ul>
        <div>
        <a href="tokyobanana1.com"><img src="./store_shop_ico.png" alt="" srcset="">tokyobanana1.com</a>
        </div>
    </div>
    <div>
        <ul>
            <li>東京ばなな2</li>
            <li>デリバリー販売</li>
        </ul>
        <div>
        <a href="tokyobanana2.com"><img src="./store_shop_ico.png" alt="" srcset="">tokyobanana2.com</a>
        </div>
    </div>

    <div>
        <ul>
            <li>草加せんべい</li>
            <li>デリバリー可</li>
        </ul>
        <div>
            <a href="sokasenbei.com"><img src="./store_shop_ico.png" alt="" srcset="">sokasenbei.com</a>
        </div>
    </div>
    <div>
        <ul>
            <li>さつまいも料理</li>
            <li>テイクアウト可</li>
        </ul>
        <div>
            <a href="satsumaimo.com"><img src="./store_shop_ico.png" alt="" srcset="">satsumaimo.com</a>
        </div>
    </div>
</div>

<h2>関西</h2>
<div>
    <div>
    <ul class="hoge-2">
        <li>false</li>
    </ul>
    <div>
        <ul>
            <li>たこやき</li>
            <li>テイクアウト可、EC販売</li>
        </ul>
        <div>
        <a href="takoyaki.com"><img src="./store_shop_ico.png" alt="" srcset="">takoyaki.com</a>
        </div>
    </div>
</div>

ブラウザ表示

東北
宮城(2件)　秋田（1件）
牛タン
デリバリー可
ghutan.com

気仙沼ホルモン
EC販売
kesennuma.com

きりたんぽ
EC、デリバリー可
kiritanpo.com


関東
東京（2件）　埼玉（2件）
東京ばなな1
EC販売
tokyobanana1.com

東京ばなな2
デリバリー販売
tokyobanan2.com


草加せんべい
デリバリー可
sokasenbei.com

さつまいも料理
テイクアウト可
satsumaimo.com


関西
false
たこやき
テイクアウト可、EC販売
takoyaki.com

#希望の出力形式
このような形にしたいです。

HTML表示

<h2>東北</h2>
<div>
    <ul class="hoge-0">
        <li>宮城(2件)</li>
        <li>秋田（1件）</li>
    </ul>
    <div>
        <ul>
            <li>牛タン</li>
            <li>デリバリー可</li>
        </ul>
        <div>
        <a href="ghutan.com"><img src="./store_shop_ico.png" alt="" srcset="">ghutan.com</a>
        </div>
    </div>
    <div>
        <ul>
            <li>気仙沼ホルモン</li>
            <li>EC販売</li>
        </ul>
        <div>
            <a href="ghutan.com"><img src="./store_shop_ico.png" alt="" srcset="">ghutan.com</a>
        </div>
    </div>
</div>


<h2>関東</h2>
<div>
    <div>
    <ul class="hoge-1">
        <li>東京（２件）</li>
        <li>埼玉（2件）</li>
    </ul>
    <div>
        <ul>
            <li>東京ばなな1</li>
            <li>EC販売</li>
        </ul>
        <div>
        <a href="tokyobanana1.com"><img src="./store_shop_ico.png" alt="" srcset="">tokyobanana1.com</a>
        </div>
    </div>
    <div>
        <ul>
            <li>東京ばなな2</li>
            <li>デリバリー販売</li>
        </ul>
        <div>
        <a href="tokyobanana2.com"><img src="./store_shop_ico.png" alt="" srcset="">tokyobanana2.com</a>
        </div>
    </div>
</div>

<h2>関西</h2>
<div>
    <div>
    <ul class="hoge-2"></ul>
    <div>
        <ul>
            <li>たこやき</li>
            <li>テイクアウト可、EC販売</li>
        </ul>
        <div>
        <a href="takoyaki.com"><img src="./store_shop_ico.png" alt="" srcset="">takoyaki.com</a>
        </div>
    </div>
</div>

ブラウザ表示

東北
宮城(2件)　秋田（1件）
牛タン
デリバリー可
ghutan.com

気仙沼ホルモン
EC販売
kesennuma.com

関東
東京（2件）　埼玉（2件）
東京ばなな1
EC販売
tokyobanana1.com
東京ばなな2
EC販売
tokyobanana2.com

関西
たこやき
テイクアウト可、EC販売
takoyaki.com

Comments

[m.ts10806]

既にある回答の通りですが、本当にこのJSONでこのコードでその結果を返しますか？
JSONはエラー出ます。
https://lab.syncer.jp/Tool/JSON-Viewer/

[southern_flavor]

ご指摘ありがとうございます。
カンマがないとご指摘がありましたのでこれを直すと結果が返ってくると思います。

[m.ts10806]

質問修正して正しく提示してください。
間違ったままの質問のコードで、回答者が勝手に手で修正するのでは、質問者と同じ状況を再現確認できません。

[southern_flavor]

すみません。JSON部分は先ほど訂正したのですが、質問内容に一部誤りがあったので再度、訂正します。

[AkitoshiManabe]

希望の出力は プレーンテキスト なのでしょうか（textarea用など、普通に使うMIME形式です）。
もしHTMLであるなら、開発者コンソール（[F12]キー）の Elements タブでコピペして、文書構造を示すように編集してください。

[southern_flavor]

質問内容に漏れが多くて、申し訳ありません。。
HTML表示にするとごちゃごちゃしててわかりづらいかなと勝手に思っていました。
文章構造として示したほうがいいのは確かなので、二つのせました。
よろしくお願いします。

Answer 1

JSONデータが間違っています、
ところどころカンマが抜けていてJSONデータとしてパーサーエラーをおこします

追記

こんな感じで整理するとよいかもしれません

    var result=json.map(x=>[
      x.region,
      x.detail.reduce((x,y)=>{
        if((n=x[0].indexOf(y.pref))==-1){
          x[0].push(y.pref);
          x[1].push(1);
          if(x[2].length==0) x[2][0]=[y.product,y.url,y.type];
        }else{
          x[1][n]++;
          if(n==0) x[2].push([y.product,y.url,y.type]);
        }
        return x;
      },[[],[],[]]),
      ]);
    console.log(result);

Comments

[southern_flavor]

ご指摘ありがとうございます。
カンマの部分について、これから修正します。

[southern_flavor]

伝わりづらい質問内容にも関わらず、ソースコードを具体的に教えていただき、ありがとうございます。
こちらのコード、よく参考にさせていただきます。

Answer 2

まだ、コードを詳細に読めていませんが、２つのHTMLを見比べると、

<li>false</li> を出力する部分に原因と期待する結果があると思います。

pref(count件) を埋め込む li に着目し、
他県データが無い＆同県に登録データが1件しかない。
というのを条件に切り分けをしてみてはどうでしょう。

Comments

[southern_flavor]

ご回答いただき、ありがとうございます。
そうですよね。おっしゃる通り、そのような条件式を書けばよいとは頭の中で考えていました。
が、その条件式の書き方がピンとこなくて現在はその辺りを調べています。

質問で書いたjsonの内容を前提に現状を書きたいと思います。
たとえば、一旦、東京だけで絞りたいとき、このようにかきました。
detail.map( e => ( e. pref === '東京' ) && `[detail内をhtml表示]`).join('');
このように書くと東京だけ絞られて東京のdetailが表示されます。
しかし、jsonの関東detail内には、埼玉もあります。
その埼玉の表示が 「false」という文字列としてブラウザで表示されます。
このfalse消すためには、falseになった場合の処理を書くことだと思いますが、

detail.map( e => ( e. pref === '東京' ) && `[detail内をhtml表示]`).join('');

これだとどこにfalseの場合の処理を書けば良いか、厚かましいようですがアドバイスもしくは参考サイトなどを教えていただけたら幸いです。

[AkitoshiManabe]

教わっった関数は自分の使いやすいようにアレンジすればいいです。
例えば、アロー関数 の 右辺にあたる処理部は { 処理内容 return 返り値 } の形に書き換え、処理内容にconsole.log() を埋め込むなど、求める結果になるようにします。

[southern_flavor]

アドバイスありがとございます。
いただいたアドバイスを参考にやってみたら、想定した通りの結果がでました。
質問のコードに対して関数で返り値、条件式に配列から取得した文字列比較を指定するだけで可能でした。
ありがとうございました。