Как фильтровать этот массив, используя значение с 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 не появляется?

источник

2017-01-22 Rehaan Kkhaan

Объект с ID из 3 не получает добавляется в ваш результат, потому что ваш помощник отфильтровывать объекты, gender свойство не равно "male". Объект 3's 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 массиве не должны начинаться или заканчиваться пробелом.

Это обновление добавит объект «Аарон» к выходу. Тем не менее, конечный результат будет:

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?

ответ

Смежные вопросы