I am making a search bar, and I'm having a weird error that has not been solved by numerous other posts of the same error. I have an array, and I am using forEach to log to the console depending on the index of the array. However, I am getting this error:

TypeError: undefined is not an object (evaluating 'sites[index].indexOf')

My code is as follows:

var sites = ["Website 1", "Website 2", "Youtube Test Page", "Go to google", "testing for foreward slashes", "MORE!!! :)", "beachballs", "test2", "Good Luck"];

function search() {
    var input = $("#searchBar")[0].value;
    sites.forEach(function(index) {
        console.log(input);
        if (sites[index].indexOf(input) != -1) {
            console.log("yay");
        }
    })
}

And here is my search bar:

<input type="text" placeholder="Search the web" id="searchBar" onkeyup="search()"/>

I have done a lot of research to no avail, so I'd appreciate some help.

I am making a search bar, and I'm having a weird error that has not been solved by numerous other posts of the same error. I have an array, and I am using forEach to log to the console depending on the index of the array. However, I am getting this error:

TypeError: undefined is not an object (evaluating 'sites[index].indexOf')

My code is as follows:

var sites = ["Website 1", "Website 2", "Youtube Test Page", "Go to google", "testing for foreward slashes", "MORE!!! :)", "beachballs", "test2", "Good Luck"];

function search() {
    var input = $("#searchBar")[0].value;
    sites.forEach(function(index) {
        console.log(input);
        if (sites[index].indexOf(input) != -1) {
            console.log("yay");
        }
    })
}

And here is my search bar:

<input type="text" placeholder="Search the web" id="searchBar" onkeyup="search()"/>

I have done a lot of research to no avail, so I'd appreciate some help.

• javascript
• jquery
• foreach

3 Answers 3

sites is an array, not a jQuery collection, so when you call forEach on it, the first argument to the callback is the item being iterated over, not the index. Change to:

sites.forEach(function(site) {
    console.log(site);
    if (site.indexOf(input) != -1) {
        console.log("yay");
    }
})

var sites = ["Website 1", "Website 2", "Youtube Test Page", "Go to google", "testing for foreward slashes", "MORE!!! :)", "beachballs", "test2", "Good Luck"];

function search() {
    var input = $("#searchBar")[0].value;
    sites.forEach(function(value,index) {
        console.log(input);
        if (sites[index].indexOf(input) != -1) {
            console.log("yay");
        }
    })
}

Array.forEach callback has 3 parameters.

callback is invoked with three arguments:

the element value

the element index

the array being traversed

arr.forEach(function callback(currentValue[, index[, array]]) {
    //your iterator
});

as for your case you only need the first parameter currentValue.

Read more Array.prototype.forEach() - Javascript | MDN