Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Array Iteration Methods Combining Array Methods Combining filter() and map()

Posted by Xavi Guasch
Xavi Guasch
10,882 Points

Combining filter() and map(), challenge doubt

Can't seem to locate my error. This is my proposed solution:

const todos = [
    {
        todo: 'Buy apples',
        done: false
    },
    {
        todo: 'Wash car',
        done: true
    },
    {
        todo: 'Write web app',
        done: false
    },
    {
        todo: 'Read MDN page on JavaScript arrays',
        done: true
    },
    {
        todo: 'Call mom',
        done: false
    }
];
let unfinishedTasks;

// unfinishedTasks should be: ["Buy apples", "Write web app", "Call mom"]
// Write your code below


unfinishedTasks = todos
  .filter(todo => todo.done = false)
  .map(todo => {(todo)});

console.log(unfinishedTasks);

6 Answers

Manish Giri
Manish Giri
16,267 Points
Manish Giri
Manish Giri
16,267 Points

This line looks wrong - .filter(todo => todo.done = false).

I'm assuming you want to filter todo items whose done field is false. You'll need to use == or === to compare the two values then. Using = just assigns false to todo.done, which doesn't make sense in case of a .filter().

A concise approach would be - .filter(todo => !todo.done).

Diana Ci
Diana Ci
18,673 Points
Diana Ci
Diana Ci
18,673 Points 
unfinishedTasks = todos
    .filter(todos => todos.done === false)
    .map(todos => todos.todo);
console.log(unfinishedTasks);
Xavi Guasch
Xavi Guasch
10,882 Points
Xavi Guasch
Xavi Guasch
10,882 Points

Since you need to pull the todo field from the object, try .map(e => e.todo).

This works, but I don't really understand the use of the "e" here... Could you please elaborate?

Manish Giri
Manish Giri
16,267 Points

When you iterate over an array with a for loop, you pick a counter variable, like - 

for(var i = 0; i < arr.length; i++) {
 // you can now refer to each array item by arr[i]
}

It's the same thing with functions like .map(), .filter(). You create a variable, which would be the current array item you're iterating upon. Generally, e is considered short for element, so people use e. You can use any name you like, ex - .map(currentItem => currentItem.todo);.

Hope this helps.

Xavi Guasch
Xavi Guasch
10,882 Points
Xavi Guasch
Xavi Guasch
10,882 Points

Thanks, Manish. But there must be another error, as it still doesn't work.

Manish Giri
Manish Giri
16,267 Points

The .map() line looks wrong to me - .map(todo => {(todo)}), unless you were trying to use Object Destructuring.

Since you need to pull the todo field from the object, try .map(e => e.todo).

Seth Kroger
Seth Kroger
56,416 Points

A { immediately after the arrow is considered the start of a function block and you'd need an explicit return statement to return anything. If you want to return an object literal in the shorthand syntax you need to wrap it in parentheses on the outside: ({ todo }) It looks like you got it reversed for what you intended. Not the correct answer for the challenge though.

Xavi Guasch
Xavi Guasch
10,882 Points
Xavi Guasch
Xavi Guasch
10,882 Points

Got it! Thanks again, Manish.

Andreas Vilhelmsson
Andreas Vilhelmsson
1,831 Points

i think this should work

let unfinish = todos.filter(function(todoo){ return todoo.done === false; });

console.log(unfinish);

Vladimir Chagorovski
seal-mask
.a{fill-rule:evenodd;}techdegree
Vladimir Chagorovski
Full Stack JavaScript Techdegree Student 12,965 Points
Vladimir Chagorovski
.a{fill-rule:evenodd;}techdegree
Vladimir Chagorovski
Full Stack JavaScript Techdegree Student 12,965 Points

Is this code okay for this exercise 

const userNames = ['Samir', 'Angela', 'Beatrice', 'Shaniqua', 'Marvin', 'Sean'];

    // Result: [{name: 'Samir'}, {name: 'Shaniqua'}, {name:'Sean'}];

const names = userNames
      .filter(name => name.includes('S'))
      .map(name =>`{name: ${name}}`);

console.log(names);
Christopher Wester
seal-mask
.a{fill-rule:evenodd;}techdegree
Christopher Wester
Full Stack JavaScript Techdegree Student 5,232 Points
Christopher Wester
.a{fill-rule:evenodd;}techdegree
Christopher Wester
Full Stack JavaScript Techdegree Student 5,232 Points

You are close, but not quite.

.includes('S') does work as all the names in the userNames array have capitilized the first character in each name.

Unfortunately, this exercise wants the output to be an array of objects. [ { }, { }, { } ]

You are returning an array of strings with curly braces in each string [ '{ }', '{ }', '{ }' ]

You would need to change this to one of the following

const userNames = ['Samir', 'Angela', 'Beatrice', 'Shaniqua', 'Marvin', 'Sean', 'Cassandra'];

    // Result: [{name: 'Samir'}, {name: 'Shaniqua'}, {name:'Sean'}];

const names = userNames
      .filter(name => name.includes('S'))
      .map(name => ({name: `${name}`}));

console.log(names);

But this use of ` characters is unnecessary for a template literal of one variable

Instead, I would suggest 

const userNames = ['Samir', 'Angela', 'Beatrice', 'Shaniqua', 'Marvin', 'Sean', 'Cassandra'];

    // Result: [{name: 'Samir'}, {name: 'Shaniqua'}, {name:'Sean'}];

const names = userNames
      .filter(name => name.includes('S'))
      .map(name => ({name: name}));

console.log(names);

or

const userNames = ['Samir', 'Angela', 'Beatrice', 'Shaniqua', 'Marvin', 'Sean', 'Cassandra'];

    // Result: [{name: 'Samir'}, {name: 'Shaniqua'}, {name:'Sean'}];

const names = userNames
      .filter(name => name.includes('S'))
      .map(name => ({name}));

console.log(names);