質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.22%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 132

やりたいこと

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

次のような形です。

  1. 下記JSON内のdetailが該当するキーワードが複数存在する場合、最初の1グループだけを表示
    下記JSONを例にすると「東北」ですと、このような結果になります。
宮城(2件) 秋田(1件)


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

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

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

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

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

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

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

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>東京(2件)</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>東京(2件)</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  
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • southern_flavor

    2020/05/23 14:00

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

    キャンセル

  • AkitoshiManabe

    2020/05/23 18:37

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

    キャンセル

  • southern_flavor

    2020/05/24 19:10

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

    キャンセル

回答 2

+4

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);

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/05/23 13:51

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

    キャンセル

  • 2020/05/24 19:12 編集

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

    キャンセル

checkベストアンサー

0

まだ、コードを詳細に読めていませんが、2つのHTMLを見比べると、
<li>false</li> を出力する部分に原因と期待する結果があると思います。

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/05/24 23:31

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

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

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

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

    キャンセル

  • 2020/05/25 01:12

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

    キャンセル

  • 2020/05/25 02:36

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る