How do I take the value of an input field and use it to filter an array?

Question

I'm new to javascript. I want the value entered into the input field to be used to evaluate what gets filtered out of the array: "e". I can't figure out what I am doing wrong. I've tried a lot of different things so I think I'm just making some syntax error? Please help me.

html:

<div id="main_container">
    <div id="content_container">
        <form id="form">
            <input id="input"></input>
            <button id="button">button</button>
        </form>
    </div>
</div>

js:

function Employee (name, salary, gender) {
    this.name = name;
    this.salary = salary;
    this.gender = gender;
}

var e = [

Matt = new Employee("Matt", 100, "Male"),
Alex = new Employee("Alex", 200, "Male"),
Zack = new Employee("Zack", 300, "Male"),
Mark = new Employee("Mark", 400, "Male"),
Rick = new Employee("Rick", 500, "Male"),

];


$('#button').on('click', function () {
    e.filter(function (e) {
        return e.salary >= $('#input').val();
    }).map (function (e) {
        return e.name;
        console.log("asdf");
    });
});

Answer 1

The issue is because you are not comparing values of the same type, you need to parse the val() of the input to an integer. After that you are not actually doing anything with the results of the map() , and the console.log in the handler there would never hit as it is after the return statement. Try this:

$('#form').on('submit', function (event) {
    event.preventDefault();
    var filterVal = parseInt($('#input').val(), 10);
    var filtered = employees.filter(function (e) {
        return e.salary >= filterVal;
    }).map(function (e) {
        return e.name;
    });
    console.log(filtered);
});

Example fiddle

Also note that I changed the event to run under form submission.

Answer 2

This is because the input Value is a string , but you are doing an int compare. Use parseInt to get the comparison to work.

 function Employee (name, salary, gender) { this.name = name; this.salary = salary; this.gender = gender; } var e = [ Matt = new Employee("Matt", 100, "Male"), Alex = new Employee("Alex", 200, "Male"), Zack = new Employee("Zack", 300, "Male"), Mark = new Employee("Mark", 400, "Male"), Rick = new Employee("Rick", 500, "Male"), ]; $('#button').on('click', function () { e.filter(function (e) { return e.salary >= parseInt($('#input').val()); }).map (function (e) { console.log("asdf: " + e.name); return e.name; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main_container"> <div id="content_container"> <form id="form"> <input id="input"></input> <button id="button">button</button> </form> </div> </div> 

Answer 3

First thing you are doing is creating array with assigment (It's bad practice, unless you want to use global variables or already defined local varibles). You must simple fill array with values without assigment:

var e = [
new Employee("Matt", 100, "Male"),
new Employee("Alex", 200, "Male"),
new Employee("Zack", 300, "Male"),
new Employee("Mark", 400, "Male"),
new Employee("Rick", 500, "Male"),
];

Second is jquery function .val() returns string, not number. So you must parse your input value to number:

var salary = parseInt($('#input').val(), 10);

Accessing DOM is slow, so try to use DOM as less as possible:

$('#button').on('click', function () {
    //Access input field once and parse it to float number.
    var salary = parseFloat($('#input').val(), 10);
    e.filter(function (e) {
        return e.salary >= salary;
    }).map (function (e) {
        return e.name;
        console.log("asdf");
    });
});

Answer 4

Not much is wrong in your code, just that you need to do a parseInt on the $('#input').val() and thats it and to have correct position of console.log .

JS Code:

function Employee(name, salary, gender) {
    this.name = name;
    this.salary = salary;
    this.gender = gender;
}

var e = [

Matt = new Employee("Matt", 100, "Male"),
Alex = new Employee("Alex", 200, "Male"),
Zack = new Employee("Zack", 300, "Male"),
Mark = new Employee("Mark", 400, "Male"),
Rick = new Employee("Rick", 500, "Male"),

];

$('#button').on('click', function (elm) {
    var sal = parseInt($('#input1').val());
    var arr = e.filter(function (e) {
        return e.salary >= sal;
    }).map(function (e) {
        return e.name;
    });
    console.log(arr);
});

HTML:

<div id="main_container">
    <div id="content_container">
        <input id="input1"></input>
        <button id="button">button</button>
    </div>
</div>

Working Fiddle