トップ JSONに関する質問読み込んだjsonファイルをjqueryでフィルタリング処理

編集履歴

回答編集履歴

テキスト修正

2018/02/12 04:56

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -123,4 +123,4 @@
 ```javascript
 ["autum"] == "autum"
 ```
-とが違う結果を返すことが理解できます。
+とが違う結果を返すことが確認できます。

テキスト修正

2018/02/12 04:56

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -88,8 +88,7 @@
 - `"caption": "カフェ、秋"` のデータは表示されない。
-という結果になります。
+という結果になります。望ましいのは、上記の３つとも表示されてほしいわけですが、
 以下、このような結果になる理由を説明します。
 まず、

テキスト修正

2018/02/12 04:53

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -89,8 +89,9 @@
 - `"caption": "カフェ、秋"` のデータは表示されない。
 という結果になります。
-このような結果になる理由を説明します。
+以下、このような結果になる理由を説明します。
 まず、
 - `"caption": "紅葉"`  と `"caption": "紅葉２"` は表示される

テキスト修正

2018/02/12 04:31

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -114,7 +114,7 @@
 上記の左辺は、やはり比較の前に文字列に変換されますが、左辺が文字列になると
 `"cafe,autum"` に変換され、右辺とは異なる文字列なので `==` は`false`を返します。
-上記のとおり、 `===` を `==` としてみることで、
+このように  `===` を `==` に変えてみることで、
 ```javascript
 ["autum"] === "autum"

テキスト修正

2018/02/12 02:45

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -94,7 +94,7 @@
 まず、
 - `"caption": "紅葉"`  と `"caption": "紅葉２"` は表示される
-理由は、以下の判定が `true`になるからです。
+理由は、以下の判定が `true`**になる**からです。
 ```javascript
 ["autum"] == "autum"

テキスト修正

2018/02/12 02:39

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -51,27 +51,76 @@
 ```javascript
 n.category == cate
 ```
-として、ご質問のコードを実行して tokyoとautumのラジオボタンをクリックしてみると、
+として、ご質問のコードを実行して autum のラジオボタンをクリックしてみると、
+API から返された
+```json
+[
+  {
-"カフェ 、秋" が autumボタンをクリックしても表示されないことを除けば、
+  　　"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"
+  },
+  {
+  　　"category": ["tokyo"],
+  　　"caption": "東京駅",
+  　　"url": "http://jsrun.it/assets/n/O/V/x/nOVx2.jpg"
+  },
+  {
+  　　"category": ["autum"],
+  　　"caption": "紅葉２",
+  　　"url": "http://jsrun.it/assets/h/I/X/B/hIXBO.jpg"
+  },
+  {
+  　　"category": ["tokyo"],
+  　　"caption": "東京タワー",
+  　　"url": "http://jsrun.it/assets/j/S/t/n/jStnu.jpg"
+  }
+]
+```
+のうち、
-これはなぜかといえば、以下の式が `true` **になる**からです。
+- `"caption": "紅葉"`  と `"caption": "紅葉２"` は表示されるが、
+- `"caption": "カフェ、秋"` のデータは表示されない。
+という結果になります。
+このような結果になる理由を説明します。
+まず、
+- `"caption": "紅葉"`  と `"caption": "紅葉２"` は表示される
+理由は、以下の判定が `true`になるからです。
 ```javascript
-["tokyo"] == "tokyo"
+["autum"] == "autum"
 ```
+上記で、左辺の `["autum"]` は、 `==` の右辺が文字列なので、
+比較される前に文字列に変換されて、`"autum"`となるので、
+`==` の結果が true になります。
+次に、
+- `"caption": "カフェ、秋"` のデータは表示されない。
+のは何故かといえば、以下が `true` には**ならない**からです。
 ```javascript
-["autum"] == "autum"
+["cafe", "autum"] == "autum"
 ```
+上記の左辺は、やはり比較の前に文字列に変換されますが、左辺が文字列になると
+`"cafe,autum"` に変換され、右辺とは異なる文字列なので `==` は`false`を返します。
-上記で、左辺の `["tokyo"]` や `["autum"]` は、 `==` の右辺が文字列なので、
-比較される前に文字列に変換されますが、 それぞれ、`"tokyo"`、 `"autum"`に変換
-されるので、 `==` の結果は true になります。
+上記のとおり、 `===` を `==` としてみることで、
-しかし、cafeのボタンをクリックしたときは意図したようには表示されません。
-それは、以下が `true` には**ならない**からです。
 ```javascript
-["cafe", "autum"] == "cafe"
+["autum"] === "autum"
 ```
+と、
-上記の左辺は、やはり比較の前に文字列に変換されますが、左辺が文字列になると
+```javascript
-`"cafe,autum"` に変換され、右辺とは異なる文字列なので `==` は`false`を返します。
+["autum"] == "autum"
+```
+とが違う結果を返すことが理解できます。

テキスト修正

2018/02/12 02:35

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -29,8 +29,9 @@
 ```
-参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。（※画像はありません）
+参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
+（※画像はありません）
 [http://jsfiddle.net/jun68ykt/8fm81f8z/4/](http://jsfiddle.net/jun68ykt/8fm81f8z/4/)
 ---
@@ -50,7 +51,7 @@
 ```javascript
 n.category == cate
 ```
-として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたときに、
+として、ご質問のコードを実行して tokyoとautumのラジオボタンをクリックしてみると、
 "カフェ 、秋" が autumボタンをクリックしても表示されないことを除けば、
 該当するものが表示されます。

テキスト修正

2018/02/11 05:13

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -1,7 +1,7 @@
 こんにちは。
 フィルタリングされた配列を作るところで、`$.grep` を使っていますが、
-これに渡す関数が返す boolean の式を、以下のように修正するとよいでしょう。
+これに渡す関数が返す真偽値（の式）を、以下のように修正するとよいでしょう。
 **修正前：**
 ```javascript

テキスト修正

2018/02/11 02:47

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -72,6 +72,5 @@
 ```javascript
 ["cafe", "autum"] == "cafe"
 ```
-上記の左辺は、やはり比較の前に文字列に変換されますが、
+上記の左辺は、やはり比較の前に文字列に変換されますが、左辺が文字列になると
-上記の左辺が文字列になると、`"cafe,autum"`という文字列に
-変換され、右辺とは異なる文字列なので、`false`を返します。
+`"cafe,autum"` に変換され、右辺とは異なる文字列なので `==` は`false`を返します。

テキスト修正

2018/02/11 02:42

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -1,8 +1,7 @@
 こんにちは。
 フィルタリングされた配列を作るところで、`$.grep` を使っていますが、
-これに渡す関数が`return` する boolean の式を、以下のように
+これに渡す関数が返す boolean の式を、以下のように修正するとよいでしょう。
-修正するとよいでしょう。
 **修正前：**
 ```javascript

テキスト修正

2018/02/11 02:40

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -1,8 +1,8 @@
 こんにちは。
-ご質問のコードの中で、フィルタリングされた配列を作るところで、
+フィルタリングされた配列を作るところで、`$.grep` を使っていますが、
-`$.grep` に渡す関数が`return` する boolean の式を
+これに渡す関数が`return` する boolean の式を、以下のように
-以下のように修正するとよいでしょう。
+修正するとよいでしょう。
 **修正前：**
 ```javascript

テキスト修正

2018/02/11 02:39

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -55,7 +55,7 @@
 "カフェ 、秋" が autumボタンをクリックしても表示されないことを除けば、
 該当するものが表示されます。
-これはなぜかといえば、以下の式が `true` になるからです。
+これはなぜかといえば、以下の式が `true` **になる**からです。
 ```javascript
 ["tokyo"] == "tokyo"

テキスト修正

2018/02/11 02:33

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -30,7 +30,7 @@
 ```
-参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
+参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。（※画像はありません）
 [http://jsfiddle.net/jun68ykt/8fm81f8z/4/](http://jsfiddle.net/jun68ykt/8fm81f8z/4/)

テキスト修正

2018/02/11 02:32

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -1,7 +1,8 @@
 こんにちは。
-ご質問のコードの中で、フィルタリングされた配列を作るところの `$.grep` に渡す関数が
+ご質問のコードの中で、フィルタリングされた配列を作るところで、
+`$.grep` に渡す関数が`return` する boolean の式を
-`return` する boolean の式を以下のように修正するとよいでしょう。
+以下のように修正するとよいでしょう。
 **修正前：**
 ```javascript

テキスト修正

2018/02/11 02:28

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -50,8 +50,8 @@
 ```javascript
 n.category == cate
 ```
-として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたときは、
+として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたときに、
-"カフェ 、秋" が autum をクリックしたときに表示されないことを除けば、
+"カフェ 、秋" が autumボタンをクリックしても表示されないことを除けば、
 該当するものが表示されます。
 これはなぜかといえば、以下の式が `true` になるからです。

テキスト修正

2018/02/11 02:22

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -50,8 +50,9 @@
 ```javascript
 n.category == cate
 ```
-として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたときは
+として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたときは、
+"カフェ 、秋" が autum をクリックしたときに表示されないことを除けば、
-意図通りに表示されます。
+該当するものが表示されます。
 これはなぜかといえば、以下の式が `true` になるからです。

テキスト修正

2018/02/11 02:19

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -36,7 +36,7 @@
 ---
 **追記**
-ご質問の本題とはややそれますが、以下補足です。
+以下補足です。
 修正前の `return` で返される式
 ```javascript

テキスト修正

2018/02/11 02:17

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -31,4 +31,46 @@
 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
-[http://jsfiddle.net/jun68ykt/8fm81f8z/4/](http://jsfiddle.net/jun68ykt/8fm81f8z/4/)
+[http://jsfiddle.net/jun68ykt/8fm81f8z/4/](http://jsfiddle.net/jun68ykt/8fm81f8z/4/)
+---
+**追記**
+ご質問の本題とはややそれますが、以下補足です。
+修正前の `return` で返される式
+```javascript
+n.category === cate
+```
+が `true` になることはありません。
+なぜなら、`===` が `true` になるためには、両辺の型が同じであることが必要ですが、
+`n.category` は配列(Array)で、 `cate` は文字列(String)だからです。
+ここで試しに、 `=` をひとつ減らした
+```javascript
+n.category == cate
+```
+として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたときは
+意図通りに表示されます。
+これはなぜかといえば、以下の式が `true` になるからです。
+```javascript
+["tokyo"] == "tokyo"
+```
+```javascript
+["autum"] == "autum"
+```
+上記で、左辺の `["tokyo"]` や `["autum"]` は、 `==` の右辺が文字列なので、
+比較される前に文字列に変換されますが、 それぞれ、`"tokyo"`、 `"autum"`に変換
+されるので、 `==` の結果は true になります。
+しかし、cafeのボタンをクリックしたときは意図したようには表示されません。
+それは、以下が `true` には**ならない**からです。
+```javascript
+["cafe", "autum"] == "cafe"
+```
+上記の左辺は、やはり比較の前に文字列に変換されますが、
+上記の左辺が文字列になると、`"cafe,autum"`という文字列に
+変換され、右辺とは異なる文字列なので、`false`を返します。

テキスト修正

2018/02/11 02:11

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -1,6 +1,7 @@
 こんにちは。
-ご質問のコードの中で、フィルタリングされた配列を作るところ
+ご質問のコードの中で、フィルタリングされた配列を作るところの `$.grep` に渡す関数が
+`return` する boolean の式を以下のように修正するとよいでしょう。
 **修正前：**
 ```javascript
@@ -9,7 +10,7 @@
  });
 ```
-の `return` で返す boolean の式を、[indexOf](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)を使って以下のように修正するといかがでしょうか？
+これを、[indexOf](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)を使って、
 **修正後：**
 ```javascript
@@ -17,7 +18,7 @@
      return n.category.indexOf(cate) >= 0;
  });
 ```
-あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のようにします。
+とするか、あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のようにします。
 **修正後：**
 ```javascript

テキスト修正

2018/02/11 01:34

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -2,6 +2,7 @@
 ご質問のコードの中で、フィルタリングされた配列を作るところ
+**修正前：**
 ```javascript
  filterdata = $.grep(alldata,function(n){
      return n.category === cate;
@@ -10,12 +11,15 @@
 の `return` で返す boolean の式を、[indexOf](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)を使って以下のように修正するといかがでしょうか？
+**修正後：**
 ```javascript
  filterdata = $.grep(alldata,function(n){
      return n.category.indexOf(cate) >= 0;
  });
 ```
 あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のようにします。
+**修正後：**
 ```javascript
  filterdata = $.grep(alldata,function(n){
      return n.category.includes(cate);
@@ -23,6 +27,7 @@
 ```
 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
 [http://jsfiddle.net/jun68ykt/8fm81f8z/4/](http://jsfiddle.net/jun68ykt/8fm81f8z/4/)

テキスト修正

2018/02/11 01:31

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -15,12 +15,14 @@
      return n.category.indexOf(cate) >= 0;
  });
 ```
+あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のようにします。
+```javascript
+ filterdata = $.grep(alldata,function(n){
+     return n.category.includes(cate);
+ });
+```
 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
-[http://jsfiddle.net/jun68ykt/8fm81f8z/3/](http://jsfiddle.net/jun68ykt/8fm81f8z/3/)
+[http://jsfiddle.net/jun68ykt/8fm81f8z/4/](http://jsfiddle.net/jun68ykt/8fm81f8z/4/)
-あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のほうがより良いコードかもしれません。
-```javascript
-return n.category.includes(cate);
-```

テキスト修正

2018/02/11 01:22

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -17,7 +17,7 @@
 ```
 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
-[http://jsfiddle.net/jun68ykt/8fm81f8z/2/](http://jsfiddle.net/jun68ykt/8fm81f8z/2/)
+[http://jsfiddle.net/jun68ykt/8fm81f8z/3/](http://jsfiddle.net/jun68ykt/8fm81f8z/3/)
 あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のほうがより良いコードかもしれません。

テキスト修正

2018/02/11 01:19

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -15,11 +15,11 @@
      return n.category.indexOf(cate) >= 0;
  });
 ```
 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
 [http://jsfiddle.net/jun68ykt/8fm81f8z/2/](http://jsfiddle.net/jun68ykt/8fm81f8z/2/)
 あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のほうがより良いコードかもしれません。
 ```javascript
 return n.category.includes(cate);

テキスト修正

2018/02/11 01:12

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -8,7 +8,7 @@
  });
 ```
-の `return` で返す boolean の式を、以下のように修正するといかがでしょうか？
+の `return` で返す boolean の式を、[indexOf](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)を使って以下のように修正するといかがでしょうか？
 ```javascript
  filterdata = $.grep(alldata,function(n){

テキスト修正

2018/02/11 01:11

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -18,4 +18,9 @@
 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
-[http://jsfiddle.net/jun68ykt/8fm81f8z/2/](http://jsfiddle.net/jun68ykt/8fm81f8z/2/)
+[http://jsfiddle.net/jun68ykt/8fm81f8z/2/](http://jsfiddle.net/jun68ykt/8fm81f8z/2/)
+あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のほうがより良いコードかもしれません。
+```javascript
+return n.category.includes(cate);
+```

テキスト修正

2018/02/11 01:10

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -3,15 +3,19 @@
 ご質問のコードの中で、フィルタリングされた配列を作るところ
 ```javascript
- filterdata=$.grep(alldata,function(n){
+ filterdata = $.grep(alldata,function(n){
-            return n.category===cate;
+     return n.category === cate;
-            });
+ });
 ```
 の `return` で返す boolean の式を、以下のように修正するといかがでしょうか？
 ```javascript
- filterdata=$.grep(alldata,function(n){
+ filterdata = $.grep(alldata,function(n){
-            return n.category.indexOf(cate) >= 0;
+     return n.category.indexOf(cate) >= 0;
-            });
+ });
-```
+```
+参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
+[http://jsfiddle.net/jun68ykt/8fm81f8z/2/](http://jsfiddle.net/jun68ykt/8fm81f8z/2/)