'How to create new array of objects with globally replaced key value from a source array of objects

I am trying to create a filter function that will create a new array of objects (newMockData) with any instance of a matching key, with its key value changed to "0", from another source array of objects (mockData). The original array of objects would look like:

const mockData = [
{
    title: 'Graph 1 Title',
    data: [
        {
            option: 'Option 1',
            confClicks: 40,
            invClicks: 20,
        },
        {
            option: 'Option 2',
            confClicks: 40,
            invClicks: 20,
        },
        {
            option: 'Option 3',
            confClicks: 20,
            invClicks: 20,
        },
    ],
},
{
    title: 'Graph 2 Title',
    data: [
        {
            option: 'Option 1',
            confClicks: 0,
            invClicks: 20,
        },
        {
            option: 'Option 2',
            confClicks: 40,
            invClicks: 20,
        },
    ],
},
];

To "filter" invClicks out I want to be able to create a new array with all "inventoryClicks" key instances with its value changing to a "0". I am assuming this requires some kind of "array.map" and/or "array.reduce"?

Example of new "invClicks" filtered array of objects:

const newMockData = [
{
    title: 'Graph 1 Title',
    data: [
        {
            option: 'Option 1',
            confClicks: 40,
            invClicks: 0,
        },
        {
            option: 'Option 2',
            confClicks: 40,
            invClicks: 0,
        },
        {
            option: 'Option 3',
            confClicks: 20,
            invClicks: 0,
        },
    ],
},
{
    title: 'Graph 2 Title',
    data: [
        {
            option: 'Option 1',
            confClicks: 0,
            invClicks: 0,
        },
        {
            option: 'Option 2',
            confClicks: 40,
            invClicks: 0,
        },
    ],
},
];

I am really struggling with this so any help would be greatly appreciate it!!!



Solution 1:[1]

const mockData = [
    {
        title: 'Graph 1 Title',
        data: [
            {
                option: 'Option 1',
                confClicks: 40,
                invClicks: 20,
            },
            {
                option: 'Option 2',
                confClicks: 40,
                invClicks: 20,
            },
            {
                option: 'Option 3',
                confClicks: 20,
                invClicks: 20,
            },
        ],
    },
    {
        title: 'Graph 2 Title',
        data: [
            {
                option: 'Option 1',
                confClicks: 0,
                invClicks: 20,
            },
            {
                option: 'Option 2',
                confClicks: 40,
                invClicks: 20,
            },
        ],
    },
];

const resetInvClicks = (data) => {
    return data.map((obj) => {
        return {
            ...obj,
            data: obj.data.map((data) => ({
                ...data,
                invClicks: 0,
            })),
        };
    });
};

console.log(resetInvClicks(mockData));

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mstephen19