filter array creating new array with title only

Question

Using an array of objects:

[{... title:'sss'},
{... title:'esd'},
{... title:'ccc'},
{... title:'vvv'},
{... title:'bb'},
{... title:'ess'}]

I'd like to search elements and return an array containing only the title of each result, something like:

 const filtered = data.filter(function(el) {
                                return el.title === text;
                            }).map(title => title); 

So if my search text was es I would end up with ['esd','ess']

Answer 1

你快到了

const filtered = data.filter(el => el.title === text).map(el => el.title)

Answer 2

You could use reduce to execute only one iteration over the initial array, rather than two iterations ( filter and map ) for performance reasons:

const filtered = data.reduce((acc, val) => {
    if (val.title === text)
        acc.push(val.title);        
    return acc;
}, []);

NOTE : There is no point of filtering against specific title and then returning an array of just the title. It is sure that you are getting an array of the same text . Maybe, you could filter against another property, or include another property to the outputed array just to distinguish the resulting items.

You could also like to read about transducers that perform this task.

Answer 3

As per this,

So if my search text was es I would end up with ['esd','ess']

You need this ,

const filtered = data.filter(function(el) { return el.title.includes(text);}).map(el => el.title); 

Answer 4

const filtered = data.map(obj => obj.title);

Answer 5

You can use Array.reduce() and String.indexOf() :

data.reduce((acc, { title }) => title.indexOf(text) > -1 ? (acc.push(title), acc) : acc, []);

Demo:

 const data = [{name: 'aa', title:'sss'}, {name: 'ee', title:'esd'}, {name: 'cc', title:'ccc'}, {name: 'vv', title:'vvv'}, {name: 'bb', title:'bb'}, {name: 'ss', title:'ess'}]; function filterData(data, text) { return data.reduce((acc, { title }) => title.indexOf(text) > -1 ? (acc.push(title), acc) : acc, []); } const filtered = filterData(data, 'es'); console.log(filtered); 

Answer 6

Just to share something a bit different, here is an approach relying on a single iteration using function generators .

This method requires no filter and mapping, it just iterates the array, acceps a filter callback function and map callback function and yields the mapped function result if the filter function result is truthy.

 const data = [{name: 'aa', title:'sss'}, {name: 'ee', title:'esd'}, {name: 'cc', title:'ccc'}, {name: 'vv', title:'vvv'}, {name: 'bb', title:'bb'}, {name: 'ss', title:'ess'} ]; function* filterAndMap(arr, filterCallback, mapCallback) { for (const item of arr) { if (filterCallback(item)) yield mapCallback(item); } } const res = [...filterAndMap(data, ({title}) => title.indexOf('ss') > -1, ({title}) => title)]; console.log(res);