array.find returning multiple results

Question

I am trying to compare a single result to an array of items (Api to be specific). Instead of .find() to return the first result it matches with the Details.title, it returns all the result. I am using EJS:

<% 
Movies.find(element => {
    if(Details.title === element.text){
        console.log(element)
    }
})
%>

Movies there is the Array of items (the api). I looped over Movies trying to get a single result that matches with Details.title, but it gives me all the results that match.

What can I do to prevent this?

Though I do not have experience on EJS, Array.find needs to return true on match. I do not see any return value in your code — Rajesh Dixit
– Rajesh Dixit, Commented Dec 23, 2020 at 13:50
Is it really returning the results or is it just console logging everything? What does this do for you? <%Movies.find(element => Details.title === element.text)%> — jmargolisvt
– jmargolisvt, Commented Dec 23, 2020 at 13:53
I realize that. I'm trying to get you to see that your current code is just producing a side effect and not using find correctly because you have no return value. — jmargolisvt
– jmargolisvt, Commented Dec 23, 2020 at 13:58
@jmargolisvt i just tried the return statement but it didn't return any output — Eloho Kennedy
– Eloho Kennedy, Commented Dec 23, 2020 at 14:06

trincot · Accepted Answer · 2020-12-23 14:19:14Z

3

You are not really using find as it should be.

The way you use it is not different than you would do with forEach: you decide with an if what you will output within the callback and don't indicate anything to stop the iteration: so you get an output of all matches.

Instead you should return a truthy value in the callback when you have a match, and not output anything there. The output should be based on what find returns:

console.log(Movies.find(element => Details.title === element.text));

Notice especially the position of console.log: it takes as argument what find returns.

Compare the difference in these runnable snippets:

Bad:

let Movies = [
    { text: "Arena", year: 1989 },
    { text: "Arena", year: 2011 },
    { text: "Asylum", year: 1972 },
    { text: "Asylum", year: 2005 },
];
let Details = { title: "Asylum" };

Movies.find(element => {
    if (Details.title === element.text) {
        console.log(element);
    }
});

Good:

let Movies = [
    { text: "Arena", year: 1989 },
    { text: "Arena", year: 2011 },
    { text: "Asylum", year: 1972 },
    { text: "Asylum", year: 2005 },
];
let Details = { title: "Asylum" };

console.log(Movies.find(element => Details.title === element.text));

edited Dec 23, 2020 at 14:19

answered Dec 23, 2020 at 13:57

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eloho Kennedy Over a year ago

please am still confused could you write a little code to explain thanks...

trincot Over a year ago

I added two snippets. One with your code, and one with mine -- both using the same data.

The Fool · Accepted Answer · 2020-12-23 16:03:50Z

The issue is that you don't return true when you find your item. The find function will keep going if not truthy value.

This will never know you "found" what you wanted.

Movies.find(element => {
    if(Details.title === element.text){
        console.log(element)
    }
})

This will know it should stop because you told it that you found what you wanted by returning true.

Movies.find(element => {
    if(Details.title === element.text){
        console.log(element)
         return true
    }
})

Since we know that if true is returned the item is returned we can directly return the result of the comparison which is either true or false (exactly what we want)

Movies.find(element => {
      return Details.title === element.text
})

As a last step, we could o use some syntactical sugar that comes with arrow functions.

Movies.find(element => Details.title === element.text)

Collectives™ on Stack Overflow

array.find returning multiple results

2 Answers 2

Bad:

Good:

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Bad:

Good:

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related