Javascript: Unable to create array based on matching nested values in 2 arrays

Question

I have 2 arrays of objects and I want to do a match on the article Author and push to a new array

var result4 = [{
    path: "don-t-call-me",
    details: {
        articleTitle: "Don’t call me",
        articleAuthor: "Dave Wood",
    }
},
{
    path: "diary",
    details: {
        articleTitle: "Diary",
        articleAuthor: "Alan Johnson",
    }
}
}]
var result3 = [{
        path: "letters",
        letters: 7
    },
    {
        path: "dont-call-me",
        details: {
            articleTitle: "Don’t call me"
            articleAuthor: "Dave Wood",
        }
    }, {
        path: "reduced-to-ashes-and-rubbage",
        details: {
            articleTitle: "Reduced to rubble",
            articleAuthor: "Jack Jones",
        }
    }, {
        path: "diary-for-2018",
        details: {
            articleTitle: "Diary for 1998",
            articleAuthor: "Alan Johnson",
        }
    }
]

therefore I want the output to be

var newArr1 = [{
    path: "don-t-call-me",
    details: {
        articleTitle: "Don’t call me",
        articleAuthor: "Dave Wood",
    }
},
{
    path: "diary",
    details: {
        articleTitle: "Diary",
        articleAuthor: "Alan Johnson",
    }
}
}]

var newArr2 = [
    {
        path: "dont-call-me",
        details: {
            articleTitle: "Don’t call me"
            articleAuthor: "Dave Wood",
        }
    }, {
        path: "diary-for-2018",
        details: {
            articleTitle: "Diary for 1998",
            articleAuthor: "Alan Johnson",
        }
    }
]

currently I create a set from each array of just the details object from each element in each array

var set3 = new Set(result3.map(({ details }) => details));
var set4 = new Set(result4.map(({ details }) => details));

Then create a new array using set.has()

var newArr1 = result3.filter(({ articleAuthor }) => set4.has(articleAuthor));
var newArr2 = result4.filter(({ articleAuthor }) => set3.has(articleAuthor));

The output for newArr2 is correct but newArr1 is empty

Answer 1

You need a deeper destructuring for the author,

{ details: { articleAuthor } = {} }

because if not, you would take the object detail for the Set and this value is in every object literal unique. And you do not get articleAuthor.

var result4 = [{ path: "don-t-call-me", details: { articleTitle: "Don’t call me", articleAuthor: "Dave Wood" } }, { path: "diary", details: { articleTitle: "Diary", articleAuthor: "Alan Johnson" } }],
    result3 = [{ path: "letters", letters: 7 }, { path: "dont-call-me", details: { articleTitle: "Don’t call me", articleAuthor: "Dave Wood" } }, { path: "reduced-to-ashes-and-rubbage", details: { articleTitle: "Reduced to rubble", articleAuthor: "Jack Jones" } }, { path: "diary-for-2018", details: { articleTitle: "Diary for 1998", articleAuthor: "Alan Johnson" } }],
    set3 = new Set(result3.map(({ details: { articleAuthor } = {} }) => articleAuthor)),
    set4 = new Set(result4.map(({ details: { articleAuthor } = {} }) => articleAuthor)),
    newArr1 = result3.filter(({ details: { articleAuthor } = {} }) => set4.has(articleAuthor)),
    newArr2 = result4.filter(({ details: { articleAuthor } = {} }) => set3.has(articleAuthor));

console.log(newArr1);
console.log(newArr2);
console.log([...set3]);
console.log([...set4]);

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