使用变量遍历数组并显示匹配JQuery

我已经阅读了关于数组，每个和其他解决方案的多篇文章，但没有一篇文章向我展示了我正在尝试做什么的问题。使用变量遍历数组并显示匹配JQuery

我想让它到达点击按钮的位置，存储该按钮的值，然后与数组中对象的值进行比较。如果找到匹配项，我希望匹配成为.append到页面的一部分。

我知道按钮点击正在注册。我有.append这个页面，并显示正确的价值。我知道我可以使用.each遍历数组中的所有对象，并将它们添加到页面中，因为我也这样做了。但是，如果我只是从下面的例子中获得雇员的支出，我得到[object Object]，因此我知道我的比较运算符不能正常工作。任何帮助，如果向我展示我的问题或解释为什么它不工作，非常感谢。

下面是按钮：

<button type="button" id="german" class="searchButton" value="German">German</button>

这是我的数组的外观这样一行

employees = [ 
{ "firstName":"Alex", "lastName":"Hagerman", "language":"German", "department":"Nuerology", "position":"Nurse",   "skill":"Infection" }, 
]

有更多的线路，但这个工程的例子。

这是我想比较按钮值与数组值的函数。（如果我只是在这里支付职员，我会得到[object Object]）

$(document).ready(function(){ 
    $('button').click(function(){ 
     var buttonValue = $(this).val(); 
     $.each(employees, function (i, employee) { 
       if (employee == buttonValue) { 
        $('#resultsView').append('<div class="searchResults">'+employee.firstName+employee.lastName+'<br />'+employee.language+'<br />'+employee.department+employee.position+'<br />'+employee.skill+'</div>'); 
      } 
       else { 
        $('#resultsView').append('<div id="resultsView" class="noResult">No results found</div>'); 
       } 

     }); 
    }); 
});

目前我只会得到未找到结果。

来源

2013-01-04 Alexander

你是否匹配一致或可以是任何值？（即，按钮可以搜索名字/姓氏/语言或只是一件事） – Snuffleupagus

现在我专注于按钮的值=“”，所以我们可以说语言。所以如果value =“German”，我想对阵列运行“German”，看到“German”是firstName的语言：“Alex”，并显示“Alex”的所有信息，我希望这样做感。 – Alexander

你有几个问题 - 第一个是，你试图比较原始对象按钮值：(employee == buttonValue)。相反，你需要比较你正在寻找的任何东西，即语言employee.language == buttonValue

第二个是，如果数组中的任何对象不匹配，它会追加no results。这可以通过设置一个标志来指示是否找到结果来解决 - 在.each循环之外使标志设置为false - 如果发现结果set flag为true。 .each循环后检查是否设置了结果 - 如果没有，则不显示任何结果。

这是working solution。

$('button').click(function(){ 
    var but = this; 
    var results = false; 
    $.each(employees, function(index, employee){ 
     if(employee.language == but.value) 
     { 
      results = true; 
      $('#resultsView').append('<div class="searchResults">' + employee.firstName + employee.lastName + '<br />' + employee.language + '<br />' + employee.department + employee.position + '<br />' + employee.skill + '</div>'); 
     } 
    }); 
    if(!results) 
    { 
     $('#resultsView').append('<div id="resultsView" class="noResult">No results found</div>'); 
    } 
});

来源

2013-01-04 16:01:21 Snuffleupagus

非常感谢！这很好。谢谢！ – Alexander

如果你想按钮值进行比较，你需要改变你的if statement这样的员工语言值：

变化：

if (employee == buttonValue) {

要：

if (employee.language == buttonValue) {

工作示例：http://jsfiddle.net/fewds/7MYED/

来源

2013-01-04 15:56:54 PhearOfRayne

首先，您正在检查整个员工对象，而不是员工对象中的给定值。

其次，如果员工与按钮值不匹配，则会打印'未找到'逻辑，因此我将其移至整个搜索的末尾。

$(function(){ 
     $('button').click(function(){ 
      var buttonValue = $(this).val(), totalFinds = 0; 
      $.each(employees, function (i, employee) { 
       var isFound=false; 
       $.each(employee, function(key,value){ 
       //remove the 'key' check if it does not make sense for your needs 
       if(key == buttonValue || value == buttonValue){ 
        isFound = true; 
       } 
       }); //end employee loop 
       if(isFound){ 
       $('#resultsView').append('<div class="searchResults">'+employee.firstName+employee.lastName+'<br />'+employee.language+'<br />'+employee.department+employee.position+'<br />'+employee.skill+'</div>'); 
       totalFinds += 1; 
       } 
      });// end employees loop 
      if(totalFinds ===0){ 
       $('#resultsView').append('<div id="resultsView" class="noResult">No results found</div>'); 
      } 
     }); //end .click() 

    });//end .ready()

来源

2013-01-04 15:57:58 DefyGravity

这看起来不错，但我得到这个问题：未处理的异常，在ms-appx的第5列第30行：//268f5af5-c2d6-4874-a49c-473181dba985/js/lyncuser.js 0x800a1391 - JavaScript运行时错误： 'totalFinds'未定义我只是将totalFinds定义为变量设置为0？ – Alexander

是的，道歉的错字。我会重新格式化，并确保我在正确的位置声明变量;） – DefyGravity

员工是一个键值对（即）的对象......你试图对象比较变量值...所以它的Wnt工作...

尝试获得您需要比较的值...只需使用'。'即可获取对象的值。运营商...说... employee.firstname

，然后作出比较...这将工作...

来源

2013-01-04 16:01:48

您可以使用$.grep()，而不是让你的所有匹配的结果..然后遍历并追加元素，如果有元素..或追加，如果没有结果

$(document).ready(function() { 
    $('button').click(function() { 
     var buttonValue = $(this).val(); 
     var results = $.grep(employees, function(data) { 
      return data.language == buttonValue; // return objects that have language = to button value 
     }) 
     if (results.length > 0) { // if 1 or more results loop through and print 
      $.each(results, function(i, employee) { 
       $('#resultsView').append('<div class="searchResults">' + employee.firstName + employee.lastName + '<br />' + employee.language + '<br />' + employee.department + employee.position + '<br />' + employee.skill + '</div>'); 
      }) 
     } else { // else append no results found 
      $('#resultsView').append('<div id="resultsView" class="noResult">No results found</div>'); 
     } 
    }); 
});

因为既然你是通过数组循环，你是不附加时的结果不相符，即使你可能会发现至少一个对象在数组中匹配

JSFIDDLE

来源

2013-01-04 16:05:19

使用变量遍历数组并显示匹配JQuery

回答

相关问题