Javascript-форум - Как правильно сделать фильтрацию?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как правильно сделать фильтрацию? (https://javascript.ru/forum/dom-window/75256-kak-pravilno-sdelat-filtraciyu.html)

Как правильно сделать фильтрацию?

Всем привет. Подскажите, пожалуйста, как решить следующую задачу.
Есть следующая разметка:

<ul class="list">
	<li class="item" data-id="1" >
		<div>item 1</div>	
	</li>
	<li class="item" data-id="2" >
		<div>item 2</div>	
	</li>
	<li class="item" data-id="3" >
		<div>item 3</div>	
	</li>
	<li class="item" data-id="4" >
		<div>item 4</div>	
	</li>
</ul>

И есть следующие json данные:

{"products": [{"id": "1", "code": "LDS51", "title": "Kindness", "disabled": "true"}, {"id": "2", "code": "LF532", "title": "Some sample", "disabled": "false"}, {"id": "3", "code": "LF532", "title": "Some sample", "disabled": "true"}, {"id": "4", "code": "LF532", "title": "Some sample"}]}

Задача в следующем: вывести эллементы у которых "disabled": "true"

Пусть сервер сразу возвращает данные с disabled=true, меньше данных передавать + на клиенте велосипедов писать не нужно будет.
Если очень хочется на клиенте фигней пострадать, то можно отсортировать данные json по этому полю (Array.filter в помощь), после их "отрисовать".

фильтрация массива обьектов по любым параметрам

s24344,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
</head>

<body>
<ul class="list"></ul>
 <script>
function fn(arr, pattern) {
    return arr.filter(function(el) {
        return pattern.some(function(mask) {
            return Object.keys(mask).every(function(key) {
                return mask[key](el[key])
            })
        })
    })
};

var json = '{"products": [{"id": "1", "code": "LDS51", "title": "Kindness", "disabled": "true"}, {"id": "2", "code": "LF532", "title": "Some sample", "disabled": "false"}, {"id": "3", "code": "LF532", "title": "Some sample", "disabled": "true"}, {"id": "4", "code": "LF532", "title": "Some sample"}]}',
obj = JSON.parse(json),
arr = obj.products,
pattern = [{disabled:function(disabled) {
   return disabled === "true"
}}],
arrFilter = fn(arr, pattern),
html = arrFilter.reduce(function(html, el) {
 return html +=  '<li class="item" data-id="'+el.id+'" ><div>'+el.title+'</div></li>'
},"");
document.querySelector(".list").innerHTML = html;
</script>

</body>
</html>

Вот такой есть вариант:

<ul class="list"></ul>


<script>
    let productsJSON = '{"products": [{"id": "1", "code": "LDS51", "title": "Kindness", "disabled": "true"}, {"id": "2", "code": "LF532", "title": "Some sample", "disabled": "false"}, {"id": "3", "code": "LF532", "title": "Some sample", "disabled": "true"}, {"id": "4", "code": "LF532", "title": "Some sample"}]}';

    let products = JSON.parse(productsJSON);
    

    function listItems(params) {
        let item = document.createElement('li');
        item.className = 'item';
        item.setAttribute('data-id', params[0]);
        item.innerHTML = `<div>${params[2]}</div> `;

        document.querySelector('ul.list').appendChild(item);
    }

    let listProducts = products['products'];

    for (let i = 0; i < listProducts.length; i++) {
        if (listProducts[i].disabled == 'true') {
            listItems([listProducts[i].id, listProducts[i].code, listProducts[i].title]);
        }
    }
</script>

MC-XOBAHCK,
У вас и для этого

{"id": "2", "code": "LF532", "title": "Some sample", "disabled": "false"}

и для этого

{"id": "3", "code": "LF532", "title": "Some sample", "disabled": "true"}

объектов создаются li

Dilettante_Pro,
согласен - я допустил ошибку взяв как булево, а не как строку.
Исправил, добавил в 22 строку == 'true'.
Теперь работает правильно.

Куча советов и никто не поинтересовался откуда странные входные данные. :)

Переданные в JSON булевы значения никогда не будут строками в объекте. Это если по уму и сервер отдает JSON. А если не по уму и ручками делается, то нужно бить по рукам, не должно быть в коде такого мракобесия xxx == 'true'. :)

laimas,
спасибо за профилактический пинок - буду знать. У меня опыта с JSON мало - загнать массив объектов в localStorage и обратно. Поэтому я таких особенностей не знал и исправил на строку.

Цитата:

Сообщение от MC-XOBAHCK

У меня опыта с JSON мало

Тут не сколько JSON, сколько непосредственно типы. Мы ведь и сами оперируем булевыми значениями и если вместо них использовать строки, ну это же профанация. Какой прок от "true"/"false"? Да никакого, с такими же успехом можно использовать любое не пустое строковое значение в качестве true, и пустую строку как false.

любое число отличное от ноля, " " = true
0, "" = false

Ожидать и проверять булево значение при этом в условии писать "true"/"false", выглядит дико, но если поступать так как выше, значит некорректно использовать типы, а следовательно собственными руками творить себе проблемы.

В языках встречается когда функция возвращает false как булево так и не булево значения, то есть или 0, или false. В этих случаях производится строгое сравнение:

if(a === false)

в остальных случаях if(a) или if(!a), на то оно и булево, не надо ничего мудрить.