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 ing 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'}

]

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 ing 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'}

]

• javascript
• arrays

• .filter() only includes or excludes items. It takes an array and returns less of it. Doesn't transform the results. The callback you give it is a predicate - it only needs to produce truthy or falsy for what to include or exclude. – VLAZ Commented Jan 13, 2022 at 7:08
• 1 That's not how filter works. It just selects which array elements will be in the result, it doesn't change the elements. You can do that before or after filtering, with map() – Barmar Commented Jan 13, 2022 at 7:08
• Actually you better use find like this: const { header } = Array2.find((obj) => obj.HeaderIndex === 1) and then console.log(header) – A1exandr Belan Commented Jan 13, 2022 at 7:12
• This is a good answer Alexandr – KingJoeffrey Commented Jan 13, 2022 at 7:15

4 Answers 4

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 simple 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}

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] ).

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;

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')