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