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

Question

我在这里阅读了多篇关于数组、.each 和其他解决方案的文章，但没有一篇向我展示了我正在尝试做的事情的问题。

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

我知道按钮点击正在注册。我已将其附加到页面中并显示了正确的值。我知道我可以使用 .each 和 .append 迭代数组中的所有对象，就像我所做的那样。但是，如果我只是 .append 下面示例中的员工，我会得到 [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" },
]

还有更多行，但这适用于示例。

这是我要将按钮值与数组值进行比较的函数。 (如果我只是在这里添加 .append employee，我会得到 [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>');
                }

        });
    });
});

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

Answer 1

您遇到了一些问题 - 首先是您试图将原始对象与按钮值进行比较:(employee == buttonValue)。相反，您需要与您正在寻找的任何内容进行比较，即语言 employee.language == buttonValue

第二个是，如果数组中的任何对象不匹配，它将附加 no results。这可以通过使用标志来指示是否找到结果来解决——在 .each 循环之外创建标志并将其设置为 false——如果找到结果，则将标志设置为 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>');
    }
});