Reputation: 1687

Use a variable to iterate through an array and show matches JQuery

I have read multiple articles on here concerning arrays, .each, and other solutions, but none of these have showed me the issue in what I am trying to do.

I want to make it to where a button is clicked, the value of that button is stored, and then compared to values of objects in an array. If a match is found I want that match to be .append into a portion of the page.

I know the button click is registering. I have .append that into the page and been displayed the proper value. I know I can iterate all of the objects in the array with .each and .append them to the page as I have done that as well. However if I just .append employee from the example below I get [object Object] and thus I know my comparison operator is not functioning correctly. Any help if showing me my problem or explaining why it is not working is greatly appreciated.

Here is the button:

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

This is what one line my array looks like

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

There are more lines but this works for the example.

This is the function I want to compare the button value to the array value. (if I was to just .append employee here I get [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>');
                }

        });
    });
});

Currently I only get No Results Found.

Upvotes: 1

Answers (5)

DefyGravity

Reputation: 6011

First, you were checking the entire employee object, not for a given value within the employee object.

Second, your 'not found' logic would print if an employee did not match the button value, so I moved that to the end of the entire search.

    $(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()

Upvotes: 1

wirey00

Reputation: 33661

You can use $.grep() instead to get all your results that match.. then loop through and append elements if there are elements.. Or append if there are no results

$(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>');
        }
    });
});

Because since you are looping through the array, you are appending No Results when it doesn't match even though you may find at least one object that does match in the array

JSFIDDLE

Upvotes: 0

Snuffleupagus

Reputation: 6725

You've got a few problems - the first is that you're trying to compare the raw object to the button value: (employee == buttonValue). Instead you need to compare to whatever you're looking for, ie for language employee.language == buttonValue

The second is that if any object in the array doesn't match it'll append no results. This can be resolved by having a flag to indicate if a result was found or not - outside of the .each loop make the flag and set to false - if a result is found set flag to true. After the .each loop check to see if a result was set - if not, display no result.

Here's a 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>');
    }
});

Upvotes: 2

user1846747

Reputation:

Employee is a key-value pair (i.e) an object... and you are trying to compare an object to a variable value... so it wnt work...

Try to get the value which you need to compare... just try getting the value from the object just by using '.' operator... say employee.firstname...

and then make the comparison... it will work...

Upvotes: 0