Map and filter an array at the same time

javascript map, filter
array filter
javascript map, filter reduce exercises
array map
array reduce
map two arrays javascript
array prototype filter call
javascript filter array multiple values

I have an array of objects that I want to iterate over to produce a new filtered array. But also, I need to filter out some of the objects from the new array depending of a parameter. I'm trying this:

function renderOptions(options) {
    return options.map(function (option) {
        if (!option.assigned) {
            return (someNewObject);
        }
    });   
}

Is that a good approach? Is there a better method? I'm open to use any library such as lodash.

You should use Array.reduce for this.

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

var reduced = options.reduce(function(filtered, option) {
  if (option.assigned) {
     var someNewValue = { name: option.name, newProperty: 'Foo' }
     filtered.push(someNewValue);
  }
  return filtered;
}, []);

document.getElementById('output').innerHTML = JSON.stringify(reduced);
<h1>Only assigned options</h1>
<pre id="output"> </pre>

JavaScript, Then we loop through our array, one object at a time. If our pet is a dog , we take the age of that dog, multiply it by seven, and add the resulting  map creates a new array by transforming every element in an array, individually. filter creates a new array by removing elements that don't belong. reduce, on the other hand, takes all of the elements in an array, and reduces them into a single value.

Use reduce, Luke!

function renderOptions(options) {
    return options.reduce(function (res, option) {
        if (!option.assigned) {
            res.push(someNewObject);
        }
        return res;
    }, []);   
}

Simplify your JavaScript – Use .map(), .reduce(), and .filter(), Simplify the way you write your JavaScript by using .map(), .reduce() and .filter() instead of for() and forEach() loops. You'll end Keep in mind that the resulting array will always be the same length as the original array. Time for an example! Filter and map a java stream at the same time. Ask Question Is there a way to do both the filtering and mapping at the same time? Then in a second step you

With ES6 you can do it very short:

options.filter(opt => !opt.assigned).map(opt => someNewObject)

Learn map, filter and reduce in Javascript, In Javascript we have map, filter and reduce, all functions that given an initial list (​array of things), transform it into something else, while keeping that same  Simplify your JavaScript – Use .map(), .reduce(), and .filter() Keep in mind that the resulting array will always be the same length as the original array. is an easy way to generate a

Array.prototype.flatMap is another option.

options.flatMap(o => o.assigned ? [o.name] : []);

From the MDN page linked above:

flatMap can be used as a way to add and remove items (modify the number of items) during a map. In other words, it allows you to map many items to many items (by handling each input item separately), rather than always one-to-one. In this sense, it works like the opposite of filter. Simply return a 1-element array to keep the item, a multiple-element array to add items, or a 0-element array to remove the item.

How to Use Map, Filter, & Reduce in JavaScript, When you call map on an array, it executes that callback on every element within Arrow functions let us leave out the return keyword in one-liners. from map , and a filtered list of tasks that took a long time with well, filter . This feature is not available right now. Please try again later.

One line reduce with ES6 fancy spread syntax is here!

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

const filtered = options
  .reduce((result, {name, assigned}) => [...result, ...assigned ? [name] : []], []);

console.log(filtered);

Chaining the Array map and filter methods from @jhusain on , Because both map and filter return Arrays, we can chain these functions When would you use forEach over .map as they both seem to do the same thing to me  To do it with map and filter you need a mapi to get x and i together, a filter for the x condition and a final map for the x to y step. That's why I used choose in my answer, because it rolls the final filter and map into one pass over the list. – TheInnerLight Dec 18 '15 at 13:05

Use JavaScript ES2019 flatMap to Map and Filter an Array from , This time, we're looking at a filtered average or students per session. I can click on A or B and get different filtered average, which is the average number of  Filter multiple columns simultaneously with Kutools for Excel. If you cannot apply the Advanced Filter expertly, the Kutools for Excel’s Super Filter also can do you a favor. With it, you just need to select the criteria as same as using the Filter feature without typing the criteria manually.

Write JavaScript loops using map, filter, reduce and find, map , filter , reduce , find. Those are 3 really powerful array functions: map returns an array with the same length,; filter as the  Elements which are appended to the array after the call to filter() begins will not be visited by callback. If existing elements of the array are changed, or deleted, their value as passed to callback will be the value at the time filter() visits them; elements that are deleted are not visited. Examples Filtering out all small values

How to use the Array.reduce method to combine the map and filter , Maybe did you already know how to use the filter and map array methods in JavaScript? But how to perform those operations both at the same time? Map, Filter and Reduce Most of the times we use lambdas with map so I did the same. Instead of a list of inputs we can even have a list of functions!

Comments
  • what about an "object.keys" approach? developer.mozilla.org/fr/docs/Web/JavaScript/Reference/…
  • Use reduce : developer.mozilla.org/fr/docs/Web/JavaScript/Reference/…
  • .reduce() is definitely faster than doing a .filter(...).map(...) which I've seen suggested elsewhere. I set up a JSPerf Test to demonstrate stackoverflow.com/a/47877054/2379922
  • For me, the first arg, filtered is an object. so filtered.push is undefined for me.
  • I also had an issue with filtered being an object. This was because I wasn't passing in the "initial value" - the empty array ([]) after the reduce function. e.g. incorrect var reduced = options.reduce(function(filtered, option) { ... }); correct var reduced = options.reduce(function(filtered, option) { ... }, []);
  • There is no reason for reduce here, you could just as well use forEach since in every iteration you change array filtered and thus it is not pure functional. It would be event more readable and compact.
  • @Marko I introduced a pure reducer as well. PTAL.
  • Yap that is pure now. +1 for your effort. Not that I'm pure functional programming advocate, far from that, I just couldn't see the point :) But actually I have used your trick after seeing it, because it came so handy in the given situation. But for this task you might want to take a look at flatMap function, I think it came into standard after you made your answer (also for that reason may be unsupported by some browsers). It should be more performant since concatenating arrays like this makes O(n^2) task out of O(n) task.
  • This will do two loops, depending on what filter returns can still eat up memory.
  • @hogan but this is the correct answer ( may not be optimal solution ) to the original query
  • @vikramvi thank you for your note. The thing is, we can achieve the same things with tons of ways and I´d prefer the best one.
  • Great solution! But, readers keep in mind that flatMap was recently introduced and its browser support is limited. You may want to use the official polyfill/shims: flatMap and flat.
  • Really nice @Maxim! I upvote this! But... on each element added, it has to spread all elements in result... is like filter(assigned).map(name) solution
  • Why on earth would you use cond && stmt;? This is much more difficult to read and offers no benefits at all.
  • You might want to check your memes... ;-)