使用Javascript和JSON搜索，使用表单参数

Search with Javascript a JSON, using form parameters

本文关键字：表单 参数 搜索 Javascript JSON 使用      更新时间：2023-09-26

我正在制作一个web应用程序，将根据给定的参数搜索卡片。

问题在于卡片有不同的类型。例如，一张卡片可能具有类似"income": 4的内容，而另一张卡片的行为完全不同，具有属性"cost" : 5。我的意思是我的JSON有5种不同类型的对象，尽管它们有许多相似之处，但它们也有一定的区别。

假设我的用户根据标题搜索一张卡片。它们都有这个属性，所以创建这样的条件相当容易。

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

但是如果我的用户也想搜索正文中的文本呢?他们也都有，所以这就导致了另一种情况，开始使事情变得尴尬。

此外，让我们假设我的用户触发了我的最坏情况，并要求两个属性，没有卡片同时拥有它们。有人会说，我应该在我的形式工作，使它们相互排斥，但在编程上这超出了我。

我决定要做的是分别搜索每个属性并将结果全部保存到数组中。如果我有和有效属性(非null或空)一样多的卡片副本，那么我将保留它们。

这是非常非常笨拙和不理想的。我肯定有我想不到的很简单的解决办法。

我该如何处理这样的问题?创造大量的条件是唯一的出路吗?我该怎么办?

编辑:谢谢你的投票。就像我在找乐子。

如果你想在javascript中搜索一个对象，你可以循环遍历属性，并访问那些object.hasOwnProperty(propertyName)返回true的

作为一个例子，你在这里看到一堆牌，具有不同的属性，搜索将遍历每张牌的所有属性，并选择一张匹配的牌，然后搜索下一张匹配的牌。

在最后，它要么显示结果，要么简单地说没有找到结果;)

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返回你所有匹配的元素基于你的选择器(在我的情况下，.search)，并获得用户给出的值，然后你可以简单地检查你的卡片是否有一个定义值，如果这个定义值真的是卡片本身的一部分

我重用了第一个代码片段中的一些代码，不想在上面花费太多的时间;)

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>

相关文章：