I'm having trouble with searching through an object and displaying the result on table using Javascript's indexOf() function

Question

I am not good in javascript as I am still trying to learn it. I've been trying to populate a table with search results but it seems impossible for me to do at the moment after several tries. I want to search through an object to get user data.

For example, if I search for "foo" through a event generated/dynamic textbox, i'll get the entire result set of all of them since firstName has "foo" in it. Doesn't matter which field. If I search for "foobar", I'll get only the first object since its email value has "foobar" substing. How do I implement this?

I have an object stored in a variable with 3 objects with properties

var usersList =[
    {
        "firstName": "foo",
        "lastName": "bar",
        "email": "foobar@gmail.com",
        "password": "12345",
        "userLevel": "Admin", // manager
        "seatId": "PIC3FA1-3",
        "localNumber": "777-78-90",
        "projects": "Delta, Google"
    },
    {
        "firstName": "foot",
        "lastName": "barn",
        "email": "footbarn@gmail.com",
        "password": "12345",
        "userLevel": "Manager", // manager
        "seatId": "PIC3FA1-1",
        "localNumber": "777-66-12",
        "projects": "Kokey, Cathay"
    },
    {
        "firstName": "food",
        "lastName": "bard",
        "email": "foodbard@gmail.com",
        "password": "12345",
        "userLevel": "user", // manager
        "seatId": "PIC3FA1-21",
        "localNumber": "777-78-90",
        "projects": "Kokey, Cathay"
    }
];

$(".section-dashboard").on('click','.search-column>a', function() {
    var input = $(".search-column>input[type='text']").val();
    var result = search(input, usersList);

    for(var key in result) {
        $(".search-column>table>tbody").append('<tr>'
                +'    <td>'+users[key].firstName+' '+users[key].lastName+'</th>'
                +'    <td>'+users[key].seatId+'</th>'
                +'    <td>'+users[key].localNumber+'</th>'
                +'    <td>'+users[key].projects+'</th>'
                +'</tr>');
    }    
});

function search(input, users) {
    var results = [];

    for(var i=0; i<users.length; i++) {
      for(key in users[i]) {
        if(users[i][key].indexOf(input)!=-1) {
          results.push(users[i]);
        }
      }
    }

    return results;
}

Search results are outputting the correct ones, but often not resembling the search inquiry at all.

Appending it seems to add the new table rows just fine, but how do I make the previous results disappear when searching anew?

Your search function is called `searchFor()` while you are calling `search()` — TimoStaudinger, Jun 28 '16 at 13:00
Possible duplicate of [Find object by id in an array of JavaScript objects](http://stackoverflow.com/questions/7364150/find-object-by-id-in-an-array-of-javascript-objects) — Jared Smith, Jun 28 '16 at 13:02
@TimoSta, I edited it, I have multiple functions testing this. — Wax, Jun 28 '16 at 13:12

score 0 · Answer 1 · answered Jun 28 '16 at 13:15

0

You're not assigning the output of search() to anything, so result stays empty.

var result = [];
search(input, usersList);

should be

var result = search(input, usersList);

answered Jun 28 '16 at 13:15

Daniel Beck

20,653
5
38
53

Sorry. I had that but messed up when trying to indent the code. Just finished editing it again. – Wax Jun 28 '16 at 13:21

Anubhav · Answer 2 · 2016-06-28T13:43:47.237

In order to remove previous rows before adding new ones, you need to empty the table as follows:

$(".section-dashboard").on('click','.search-column>a', function() {
    var input = $(".search-column>input[type='text']").val();
    var result = search(input, usersList);

    // add this line. This empties the table before adding new rows.
    $(".search-column>table>tbody .new_data").remove()

    for(var key in result) {
        $(".search-column>table>tbody").append('<tr class="new_data">'
                +'    <td>'+users[key].firstName+' '+users[key].lastName+'</th>'
                +'    <td>'+users[key].seatId+'</th>'
                +'    <td>'+users[key].localNumber+'</th>'
                +'    <td>'+users[key].projects+'</th>'
                +'</tr>');
    }    
});

Edit: You can set a class on the newly populated rows to target them while removing them later on.

My original code has a with child to give title to the table columns. This removes those. — Wax, Jun 28 '16 at 13:37
@Carnal I have updated my answer to incorporate your changes. — Anubhav, Jun 28 '16 at 13:44

score 0 · Accepted Answer · answered Jun 28 '16 at 22:04

I did this instead. It's working fine now. I just put all the indexOf inside an if statement and it's working fine now, just wondering if I can better this code

$(".section-dashboard").on('input','.search-column>input[type="text"]', function() {
    var input = $(this).val().toLowerCase();
    var fullname = "";

    $(".search-column>table>tbody").html(
                      '<tr>'
    +'                    <th>Fullname</th>'
    +'                    <th>Seat ID</th>'
    +'                    <th>Projects</th>'
    +'                    <th>Local Number</th>'
    +'                </tr>');

    $(".search-column>p").hide();

    for(var key in usersList) {
        // Full name
        fullname = usersList[key].firstName.toLowerCase() +' '+usersList[key].lastName.toLowerCase();

        // Check if any of the fields has a substring of the user input
        if((fullname.indexOf(input) > -1 || usersList[key].firstName.toLowerCase().indexOf(input) > -1 || usersList[key].lastName.toLowerCase().indexOf(input) > -1 || usersList[key].seatId.toLowerCase().indexOf(input) > -1 || usersList[key].localNumber.toLowerCase().indexOf(input) > -1 || usersList[key].projects.toLowerCase().indexOf(input) > -1) && input) {
           $(".search-column>table>tbody").append('<tr>'
        +'    <td>'+usersList[key].firstName+' '+usersList[key].lastName+'</th>'
        +'    <td>'+usersList[key].seatId+'</th>'
        +'    <td>'+usersList[key].localNumber+'</th>'
        +'    <td>'+usersList[key].projects+'</th>'
        +'</tr>');
        }
    }   
});

I'm having trouble with searching through an object and displaying the result on table using Javascript's indexOf() function

3 Answers3