Искать с Javascript a JSON, используя параметры формы

Question

Я делаю webapp, который будет искать карты по заданным параметрам.

Проблема заключается в том, что карты имеют разные типы. Например, одна карта может иметь что-то вроде "income": 4, а другая ведет себя совершенно по-другому и имеет атрибут "cost" : 5. Все, что я имел в виду, это то, что у моего JSON есть 5 типов разных объектов, хотя они имеют много общего, они имеют определенные отличия.

Итак, предположим, что мой пользователь ищет карту на основе Title. Все они имеют этот атрибут, поэтому довольно легко сделать такое условие.

if ((item.name.toLowerCase().indexOf(cardParams.searchTitle.toLowerCase()) > -1) && (cardParams.searchTitle != null) && (cardParams 
     .searchTitle.length > 0)){ 

Но что, если мой пользователь хочет также искать текст в теле? У всех из них есть тоже, поэтому это приводит к другому состоянию с запуском, что делает вещи неудобными.

Кроме того, давайте укажем, как мой пользователь запускает мой сценарий с наименьшим сценарием и запрашивает два атрибута, которые у них нет одновременно, а также те, что указаны выше. Можно сказать, что я должен работать над своей формой, чтобы сделать их взаимоисключающими, но программно это выходит за рамки меня.

Что я решил пойти, это искать каждый атрибут отдельно и сохранять результаты в массиве. Если у меня столько дубликатов карты, сколько допустимых атрибутов (не пустых или пустых), я бы сохранил их.

Это действительно неуклюжий и не оптимальный. Я уверен, что есть очень простые решения, о которых я не могу думать.

Как я могу приступить к такой проблеме? Создает тонны условий единственный способ пойти? Что мне делать?

Редактировать: Спасибо за downvotes. Это все равно, что я прошу веселиться.

Answer 1

Если вы хотите выполнить поиск по объекту внутри JavaScript, вы можете просто цикл по свойствам, и получить доступ к тем, для которых object.hasOwnProperty(propertyName) возвращает истинные

В качестве примера, вы видите здесь кучу карт, с различными свойства, поиск будет, однако, перебирать все свойства каждой карты и выберет карту, которая соответствует, а затем будет искать следующую подходящую карту.

В конце концов, это будет либо показать результаты, или просто говорит, что нет результатов не найдено;)

var cards = [{ 
 
    title: 'Card 1', 
 
    prop1: 'Test of card1', 
 
    description: 'Description of card1', 
 
    customCard1: 'Custom property' 
 
}, { 
 
    title: 'Card 2', 
 
    description: 'Description of card2', 
 
    customCard2: 'Custom property card2' 
 
}]; 
 

 
function searchCards() { 
 
    var txt = document.getElementById('searchBox').value.toLowerCase(), 
 
    i, len, card, prop, matches = [], 
 
    val; 
 

 
    for (i = 0, len = cards.length; i < len; i++) { 
 
    card = cards[i]; 
 
    for (prop in card) { 
 
     if (card.hasOwnProperty(prop)) { 
 
     val = card[prop]; 
 
     if (typeof val !== 'undefined' && val.toLowerCase && val.toLowerCase().indexOf(txt) >= 0) { 
 
      // this card matches 
 
      matches.push(card); 
 
      break; 
 
     } 
 
     } 
 
    } 
 
    } 
 
    showMatches(matches); 
 
} 
 

 
function showMatches(matches) { 
 
    var elem = document.getElementById('result'), 
 
    i, len, content = ''; 
 
    if (typeof matches === 'undefined' || !matches.length) { 
 
    elem.innerHTML = '<i>No results found</i>'; 
 
    return; 
 
    } 
 
    for (i = 0, len = matches.length; i < len; i++) { 
 
    content += '<div><b>title:</b>' + matches[i].title + '</div>'; 
 
    } 
 
    elem.innerHTML = content; 
 
}

<input type="text" id="searchBox" /> 
 
<button type="button" onclick="javascript:searchCards()">Search</button> 
 
<div id="result"></div>

Обновления на основе комментариев

Если вы имеют несколько полей ввода, вы можете дать им дополнительный класс для их распознавания, а затем пусть jQuery вернет вам все соответствующие элементы на основе вашего селектора (в моем случае, ,поиск) и получить значения, предоставленные пользователем, тогда вы можете просто проверить, имеет ли ваша карта определенное значение для него, и если это определенное значение действительно является частью самой карты

Я повторно использовал код из первый фрагмент, не хотел тратить на много дополнительного времени на нем;)

var cards = [{ 
 
    title: 'Card 1', 
 
    prop1: 'Test of card1', 
 
    description: 'Description of card1', 
 
    customCard1: 'Custom property' 
 
}, { 
 
    title: 'Card 2', 
 
    description: 'Description of card2', 
 
    customCard2: 'Custom property card2' 
 
}]; 
 

 

 
function getSearchParameters() { 
 
    var properties = []; 
 
    $('.search').each(function() { 
 
    if (this.value) { 
 
     properties.push(this.value); 
 
    } 
 
    }); 
 
    return properties; 
 
} 
 

 
function search() { 
 
    var properties = getSearchParameters(), i, len, card, matches = [], p, plen, prop, match; 
 
    for (i = 0, len = cards.length; i < len; i++) { 
 
    card = cards[i]; 
 
    match = true; 
 
    for (p = 0, plen = properties.length; p < plen; p++) { 
 
     prop = properties[p]; 
 
     if (typeof card[prop] === 'undefined' || !card.hasOwnProperty(prop)) { 
 
     // didn't find a property, this doesn't match 
 
     match = false; 
 
     break; 
 
     } 
 
    } 
 
    if (match) { 
 
     matches.push(card); 
 
    } 
 
    } 
 
    showMatches(matches); 
 
} 
 

 

 
function showMatches(matches) { 
 
    var elem = document.getElementById('result'), 
 
    i, len, content = ''; 
 
    if (typeof matches === 'undefined' || !matches.length) { 
 
    elem.innerHTML = '<i>No results found</i>'; 
 
    return; 
 
    } 
 
    for (i = 0, len = matches.length; i < len; i++) { 
 
    content += '<div><b>title:</b>' + matches[i].title + '</div>'; 
 
    } 
 
    elem.innerHTML = content; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="search" /> 
 
<input type="text" class="search" /> 
 
<input type="text" class="search" /> 
 
<input type="text" class="search" /> 
 
<input type="text" class="search" /> 
 
<input type="text" class="search" /> 
 
<input type="text" class="search" /> 
 
<input type="text" class="search" /> 
 
<button type="button" onclick="search()">Search for matching properties</button> 
 
<div id="result"> 
 
</div>