array.filter is returning entire object instead of just one value-CodePudding

I have a simple function that is filtering an array.

I only want the string value, not the entire object.

Why is the entire object coming back and not just the string?

I get the desired output if I switch the return to a console.log()

Any ideas?

Here is the code

 const Array2 = [
        { header: 'First name', HeaderIndex: 0},
        { header: 'Last name', HeaderIndex: 1},
        { header: 'Company', HeaderIndex: 2},
        { header: 'Favorite food', HeaderIndex: 3},
        { header: 'Favorite color', HeaderIndex: 4},
    ]

const testing = Array2.filter((obj) => { if(obj.HeaderIndex === 1) { return obj.header } } )

console.log(testing)

// gives undesired output

[{…}]
0: {header: 'Last name', HeaderIndex: 1}
length: 1
[[Prototype]]: Array(0)



const testing = Array2.filter((obj) => { if(obj.HeaderIndex === 1) { console.log(obj.header)} } )

// gives desired output

"Last name"

my problematic output is below, I just want to return the string

[{…}]
0: {header: 'Last name', HeaderIndex: 1}
length: 1
[[Prototype]]: Array(0)

Update*

I accepted the answer from Mayur because it solved my problem in a bigger use case. Here is my bigger use case below where I needed to merge these two arrays depending on Array1 index needing to match HeaderIndex from Array2



const Array1 = [ 
    ['Alex', 'Boe', 'MeowWolf', 'pizza', 'pink'],
    ['Arron', 'Coe', 'Kmart', 'tofu', 'purple'],
    ['Jane', 'Doe', 'Sears', 'tacos', 'orange'],
    ['John', 'Eoe', 'YugiOh', 'blueberries', 'magenta'],
    ['Suzie', 'Boe', 'Toyota', 'steroids', 'blue']
    ]
    
    
    const Array2 = [
        { header: 'First name', HeaderIndex: 0},
        { header: 'Last name', HeaderIndex: 1},
        { header: 'Company', HeaderIndex: 2},
        { header: 'Favorite food', HeaderIndex: 3},
        { header: 'Favorite color', HeaderIndex: 4},
    ]

const testResult = Array1.map((arr) => arr.map((string) => { return  {"ChosenHeader": Array2.filter((obj) => obj.HeaderIndex === arr.indexOf(string))[0]?.header, "content": string}} ))

console.log(testResult)


// desired output


[

0: {ChosenHeader: 'First name', content: 'Alex'}
1: {ChosenHeader: 'Last name', content: 'Boe'}
2: {ChosenHeader: 'Company', content: 'MeowWolf'}
3: {ChosenHeader: 'Favorite food', content: 'pizza'}
4: {ChosenHeader: 'Favorite color', content: 'pink'}

]

CodePudding user response：

Because filter() always return an array. you want filter from return array. using [0].header You can do it !

Try this code it's work

 const testing = Array2.filter((obj) => obj.HeaderIndex === 1)[0].header;
    console.log(testing, 'testing')

CodePudding user response：

The array filter method always return a new array with the result. In your example in the second test when you console.log it, you're printing this result inside the function, but if you console.log the variable (testing), you should have also an array like in the first test.

What you should do is after you have the new array returned, use a forEach, a map or just acces to the element with the index (if you always will have only one result you always can use testing[0] ).

CodePudding user response：

After .filter() use .map():

const testing = Array2.filter((obj) => obj.HeaderIndex === 1).map(x => x.header);

I think in your case better use .find() instead of .filter() like:

const testing = (Array2.find((obj) => obj.HeaderIndex === 1) || {}).header;

CodePudding user response：

Actually in that case you better use find insted filter:

const Array2 = [{ header: 'First name', HeaderIndex: 0},{ header: 'Last name', HeaderIndex: 1},{ header: 'Company', HeaderIndex: 2},{ header: 'Favorite food', HeaderIndex: 3},{ header: 'Favorite color', HeaderIndex: 4},];
    
const { header } = Array2.find((obj) => obj.HeaderIndex === 1);
console.log(header);

.as-console-wrapper{min-height: 100%!important; top: 0}

But if you have to use filter just use sinple destructuring

const Array2 = [{ header: 'First name', HeaderIndex: 0},{ header: 'Last name', HeaderIndex: 1},{ header: 'Company', HeaderIndex: 2},{ header: 'Favorite food', HeaderIndex: 3},{ header: 'Favorite color', HeaderIndex: 4},];
        
const [{ header }] = Array2.filter((obj) => obj.HeaderIndex === 1);
console.log(header);

.as-console-wrapper{min-height: 100%!important; top: 0}