handlebars.jsの値を使用してこの配列をフィルタリングするにはどうすればよいですか？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> 
 
</head> 
 
<body> 
 

 
<!--This is our template. --> 
 
<!--Data will be inserted in its according place, replacing the brackets.--> 
 
<script id="t" type="text/x-handlebars"> 
 
    {{#each_when profile "gender" "male"}} 
 
     {{ID}}. {{from}} {{gender}}<br> 
 
    {{/each_when}} 
 
</script> 
 

 
<!--Your new content will be displayed in here--> 
 
<div class="content-placeholder"></div> 
 

 
<script> 
 
var json = { 
 
    "profile": [ 
 
     { "ID": 1, "gender": "male", "from": "Olivia" }, 
 
     { "ID": 2, "gender": "male", "from": "Meagen" }, 
 
     { "ID": 3, "gender": "female, male", "from": "Aaron" }, 
 
     { "ID": 4, "gender": "female", "from": "Aaron" } 
 
    ] 
 
}; 
 

 
Handlebars.registerHelper('each_when', function(list, k, v, opts) { 
 
    console.log(arguments); 
 
    var i, result = ''; 
 
    for(i = 0; i < list.length; ++i) 
 
     if(list[i][k] == v) 
 
      result = result + opts.fn(list[i]); 
 
    return result; 
 
}); 
 

 
var t = Handlebars.compile($('#t').html()); 
 
$('body').append(t(json)); 
 
</script> 
 
</body> 
 
</html>

上記のコードの結果は次のとおりです。

1. Olivia male 
2. Meagen male

しかし、私は次のことをしたい：

1. Olivia male 
2. Meagen male 
3. Aaron male

私はプロパティでオブジェクトの配列をフィルタリングしていますし、そのプロパティは、複数の値を含むことができる文字列です。

なぜ3. Aaron maleは表示されないのですか？あなたのヘルパーは、そのgender財産"male"と等しくないオブジェクトをフィルタリングしているため

出典

2017-01-22 Rehaan Kkhaan

3のIDを持つオブジェクトは、あなたの結果に追加されません。オブジェクト3のgenderは"female, male"です。したがって、等価性テストに合格しません。

list[i][k]にvが含まれているかどうかを確認するには、ロジックを更新する必要があります。私は横に空白文字を削除するために正規表現を使用しています

var i, result = '', values; 

for (i = 0; i < list.length; ++i) { 
    values = list[i][k].replace(/\s*,\s*/, ',').split(','); 
    if (values.indexOf(v) > -1) { 
     result += opts.fn(list[i]); 
    } 
} 

return result;

注意「」分割前に - 私は私のvalues配列内の要素が始まるまたはスペースで終わらないことを確実にすることができるこの方法。

このアップデートでは、 "Aaron"オブジェクトが出力に追加されます。しかし、最終的な結果は以下のようになります。

1. Olivia male<br> 
2. Meagen male<br> 
3. Aaron female, male<br>

あなたは「女性、男性は」あなたは本当にオブジェクトのgenderプロパティをレンダリングしたくないことを意味しアーロンに表示したくない場合。代わりに、あなたはちょうどテンプレートにしたいテキストをハードコードする必要があります：

{{ID}}. {{from}} male<br>

出典

2017-01-25 04:37:08 76484

あなたの返信に感謝 '76484'。しかしあなたのコードは動作しません。 –

@RehaanKkhaan：ソリューションを書いたときに、いくつかの変数名を変更しました。私は元の 'k'と' v'に戻しました。実際の例については、https://jsfiddle.net/zxm7x9sy/を参照してください。 – 76484

handlebars.jsの値を使用してこの配列をフィルタリングするにはどうすればよいですか？

答えて

関連する問題