jsonのkeyを条件分岐に使用したい。

文章では、伝えにくいところがあるのですが、
以下にサンプルコードと補足を記載します。

わかりにくいところがあれば、随時補足致しますので
よろしくお願いします。

※サンプルコード下部へ、改めて質問を記載します。

【json】

[
    {
        "name": "hoge",
        "id": "1",
    },
    {
        "name": "foo",
        "id": "0",
    },
    {
        "name": "fuge",
        "id": "1",
    },
]

【html.jQuery】

html,jQuery
1<html>
2<p data-name="text">hoge</p>
3<p data-name="text">foo</p>
4<p data-name="text">fuge</p>
5</html>
6
7<script>
8$("p[data-name='text']").each(function(index) {
9  ※for文で,jsonファイルからname,idを取得(変数名もname = name、id = idとする）
10
11  var text = $(this).text();
12  if(name === text && id === 0) {
13    $(this).hide();
14  }
15}
16</script>
17

前提

・ajaxでjsonファイルを取得することを想定（質問外の箇所になるため、サンプルコードの記述なし）

質問

if(name === text && id === 0)
「name(json)とtext(html)が一致、尚且つnameのidが0の場合は非表示」
という条件分岐を行いたいのですが、
どのように修正すれば良いのでしょうか？？

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

行動規範の内容に同意します

回答3件

XPath

ループ処理を回避するなら、XPathを使う方法もあります。

ダブルクォートのエスケープ処理は省略しました(詳細は下記リンク参照)。
マッチする対象ノードが複数存在する場合は、XPathResult.ORDERED_NODE_SNAPSHOT_TYPE 等でループさせる必要があります

HTML
1<p data-name="text">hoge</p>
2<p data-name="text">foo</p>
3<p data-name="text">fuge</p>
4
5<script>
6'use strict';
7const json = '[{"name":"hoge","id":"1"},{"name":"foo","id":"0"},{"name":"fuge","id":"1"}]';
8
9for (let object of JSON.parse(json)) {
10  const name = object.name;
11
12  if (object.id === '0') {
13    document.evaluate('descendant::p[text()="' + name.replace(/"/g, ''') + '"]', document.body, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.style.display = 'none';
14    break;
15  }
16}
17</script>

new Map

idがユニークであるならば、new Map を使うと、ループ処理を一つ減らせます。

JavaScript
1const json = '[["1","hoge"],["0","foo"],["1","fuge"]]';
2
3document.evaluate('descendant::p[text()="' + new Map(JSON.parse(json)).get('0').replace(/"/g, '') +'"]', document.body, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.style.display = 'none';

Re: frtne さん

投稿2019/06/03 14:21

編集2019/06/03 14:24

think49

総合スコア18162

frtne

2019/06/03 14:31

今回はjQueryを使って読んで誰しも理解できるようなコードで描きたいため、個人的な勉強用にいただいたサンプルコード利用させてもらいます！ご回答いただきありがとうございました

行動規範の内容に同意します

.grep(), .map(), .inArray() で。
JavaScript の .filter(), .map(), ~~.includes()~~ .indexOf() に相当します。

jQuery
1  var data = $.map($.grep(json, function(v) { return v.id === '0'; }), function(v) { return v.name; });
2  $("p[data-name='text']").each(function(index) {
3    var text = $(this).text();
4    if ($.inArray(text, data) >= 0) {
5      $(this).hide();
6    }
7  });

https://api.jquery.com/jQuery.grep/
https://api.jquery.com/jQuery.map/
https://api.jquery.com/jQuery.inArray/

投稿2019/06/03 01:28

編集2019/06/03 01:32

x_x

総合スコア13749

frtne

2019/06/03 11:09

var data = $.map($.grep(json, function(v) { return v.id === '0'; }), function(v) { return v.name; }); の部分がエラーを吐いてしまうようです。ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー同件なのですが、少し切り口が違うことで追記のようなことを達成したのですが、現状の記述のままだと不可でしょうか？？