17.09.2018, 10:48
|
|
Профессор
|
|
Регистрация: 12.08.2015
Сообщений: 206
|
|
|
Как правильно сделать фильтрацию?
Всем привет. Подскажите, пожалуйста, как решить следующую задачу.
Есть следующая разметка:
<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" |
|
17.09.2018, 11:14
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,795
|
|
Пусть сервер сразу возвращает данные с disabled=true, меньше данных передавать + на клиенте велосипедов писать не нужно будет.
Если очень хочется на клиенте фигней пострадать, то можно отсортировать данные json по этому полю ( Array.filter в помощь), после их "отрисовать". |
|
17.09.2018, 12:10
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
фильтрация массива обьектов по любым параметрам
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>
Последний раз редактировалось рони, 17.09.2018 в 12:26.
|
|
17.09.2018, 12:30
|
|
Профессор
|
|
Регистрация: 12.08.2015
Сообщений: 206
|
|
|
Спасибо
|
|
17.09.2018, 13:44
|
 |
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
Вот такой есть вариант:
<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, 17.09.2018 в 14:26.
|
|
17.09.2018, 13:56
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
MC-XOBAHCK,
У вас и для этого
{"id": "2", "code": "LF532", "title": "Some sample", "disabled": "false"}
и для этого
{"id": "3", "code": "LF532", "title": "Some sample", "disabled": "true"}
объектов создаются li
|
|
17.09.2018, 14:31
|
|
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
|
Dilettante_Pro,
согласен - я допустил ошибку взяв как булево, а не как строку.
Исправил, добавил в 22 строку == 'true'.
Теперь работает правильно.
|
|
17.09.2018, 14:43
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Куча советов и никто не поинтересовался откуда странные входные данные. 
Переданные в JSON булевы значения никогда не будут строками в объекте. Это если по уму и сервер отдает JSON. А если не по уму и ручками делается, то нужно бить по рукам, не должно быть в коде такого мракобесия xxx == 'true'. |
|
17.09.2018, 15:02
|
|
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
|
laimas,
спасибо за профилактический пинок - буду знать. У меня опыта с JSON мало - загнать массив объектов в localStorage и обратно. Поэтому я таких особенностей не знал и исправил на строку.
|
|
17.09.2018, 15:24
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от MC-XOBAHCK
|
|
У меня опыта с JSON мало
|
Тут не сколько JSON, сколько непосредственно типы. Мы ведь и сами оперируем булевыми значениями и если вместо них использовать строки, ну это же профанация. Какой прок от "true"/"false"? Да никакого, с такими же успехом можно использовать любое не пустое строковое значение в качестве true, и пустую строку как false.
любое число отличное от ноля, " " = true
0, "" = false
Ожидать и проверять булево значение при этом в условии писать "true"/"false", выглядит дико, но если поступать так как выше, значит некорректно использовать типы, а следовательно собственными руками творить себе проблемы.
В языках встречается когда функция возвращает false как булево так и не булево значения, то есть или 0, или false. В этих случаях производится строгое сравнение:
if(a === false)
в остальных случаях if(a) или if(!a), на то оно и булево, не надо ничего мудрить. |
|
|
|
