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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

4821閲覧

読み込んだjsonファイルをjqueryでフィルタリング処理

m_a_u_v_e

総合スコア22

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/02/10 23:28

前提・実現したいこと

jsonファイルを読み込み、例えばカテゴリごとに表示することを行おうとしておりますが、うまく実現ができません。

CODEPENにソースをアップしております。
https://codepen.io/m_a_u_v_e/pen/vdmYgX

jsonファイルの"category"によってフィルタリングをしたいと思っておりまして、
categoryは複数に設定可能の仕様になっています。

[

{
"category": ["cafe", "autum"],
"caption": "カフェ ",
"url": "http://jsrun.it/assets/3/o/C/A/3oCAy.jpg"
},

{
"category": ["autum"],
"caption": "紅葉",
"url": "http://jsrun.it/assets/y/c/W/i/ycWii.jpg"
},

・・・続く・・・

]

htmlファイルはラジオボタンにしてあり、valueの値で表示するカテゴリを判別します。

該当のソースコード

js

1//変数設定 2var $imageWrap=$("#imageWrap"); 3var alldata=[]; //ここはすべてのデータを保持しておく配列 4var filterdata=[]; //フィルターを掛けたデータを保持する配列 5 6 7//最初に読み込んだ時に発生する関数 8$.getJSON('http://jsrun.it/assets/c/s/y/n/csynt',init); 9 10function init(data){ 11 //全データを保持しておく 12 alldata=data; 13 14 //とりあえず全データを代入しておく 15 filterdata=alldata; 16 17 //データを表示させる 18 display(); 19} 20 21//画像表示させるための関数 22function display(){ 23 $imageWrap.empty(); 24 for(var i=0; i<filterdata.length; i++){ 25 $('<li><img src="'+filterdata[i].url+' " /><p>'+filterdata[i].caption+'</p></li>').appendTo($imageWrap); 26 } 27} 28 29//ラジオボタンが変わった時にフィルタリングする関数 30$('input:radio').change(function(){ 31 //チェックボタンの状況によってフィルタリングする 32 var cate=$(this).val(); 33 //フィルターの配列をいったん空っぽにする 34 filterdata=[]; 35 36 if(cate==="all"){//allが選択されたら全データを保持 37 filterdata=alldata; 38 39 }else{ 40 filterdata=$.grep(alldata,function(n){ 41 return n.category===cate; 42 }); 43 } 44 45 display(); 46}); 47

補足情報

仕組み自体は下記の記事を参考にしておりまして、
categoryが複数の場合での分岐方法が不明のため、
ご教授頂きたくお願いいたします。

http://the-zombis.sakura.ne.jp/wp/blog/2014/01/03/post-2094/

何卒よろしくお願いいたします。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

フィルタリングされた配列を作るところで、$.grep を使っていますが、
これに渡す関数が返す真偽値(の式)を、以下のように修正するとよいでしょう。

修正前:

javascript

1 filterdata = $.grep(alldata,function(n){ 2 return n.category === cate; 3 });

これを、indexOfを使って、

修正後:

javascript

1 filterdata = $.grep(alldata,function(n){ 2 return n.category.indexOf(cate) >= 0; 3 });

とするか、あるいは、includesを使って、以下のようにします。

修正後:

javascript

1 filterdata = $.grep(alldata,function(n){ 2 return n.category.includes(cate); 3 }); 4

 
参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
(※画像はありません)

http://jsfiddle.net/jun68ykt/8fm81f8z/4/


追記

以下補足です。

修正前の return で返される式

javascript

1n.category === cate

true になることはありません。
なぜなら、===true になるためには、両辺の型が同じであることが必要ですが、
n.category は配列(Array)で、 cate は文字列(String)だからです。

ここで試しに、 = をひとつ減らした

javascript

1n.category == cate

として、ご質問のコードを実行して autum のラジオボタンをクリックしてみると、
API から返された

json

1[ 2 { 3   "category": ["cafe", "autum"], 4   "caption": "カフェ、秋", 5   "url": "http://jsrun.it/assets/3/o/C/A/3oCAy.jpg" 6 }, 7 { 8   "category": ["autum"], 9   "caption": "紅葉", 10   "url": "http://jsrun.it/assets/y/c/W/i/ycWii.jpg" 11 }, 12 { 13   "category": ["tokyo"], 14   "caption": "東京駅", 15   "url": "http://jsrun.it/assets/n/O/V/x/nOVx2.jpg" 16 }, 17 { 18   "category": ["autum"], 19   "caption": "紅葉2", 20   "url": "http://jsrun.it/assets/h/I/X/B/hIXBO.jpg" 21 }, 22 { 23   "category": ["tokyo"], 24   "caption": "東京タワー", 25   "url": "http://jsrun.it/assets/j/S/t/n/jStnu.jpg" 26 } 27]

のうち、

  • "caption": "紅葉""caption": "紅葉2" は表示されるが、

  • "caption": "カフェ、秋" のデータは表示されない。

という結果になります。望ましいのは、上記の3つとも表示されてほしいわけですが、
以下、このような結果になる理由を説明します。

まず、

  • "caption": "紅葉""caption": "紅葉2" は表示される

理由は、以下の判定が trueになるからです。

javascript

1["autum"] == "autum"

上記で、左辺の ["autum"] は、 == の右辺が文字列なので、
比較される前に文字列に変換されて、"autum"となるので、
== の結果が true になります。

次に、

  • "caption": "カフェ、秋" のデータは表示されない。

のは何故かといえば、以下が true にはならないからです。

javascript

1["cafe", "autum"] == "autum"

上記の左辺は、やはり比較の前に文字列に変換されますが、左辺が文字列になると
"cafe,autum" に変換され、右辺とは異なる文字列なので ==falseを返します。

このように ===== に変えてみることで、

javascript

1["autum"] === "autum"

と、

javascript

1["autum"] == "autum"

とが違う結果を返すことが確認できます。

投稿2018/02/11 01:02

編集2018/02/12 04:56
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m_a_u_v_e

2018/02/11 02:09

ご教授いただき誠にありがとうございました。 意図した通りになりました。
jun68ykt

2018/02/11 02:12 編集

補足として、=== と == について追記しました。ひとまず解決されたようですね、良かったです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問