如何根据对象数组的值创建一个新的项目数组？

Question

I have an array of objects called firstArray with an unknown number of items:

firstArray = [
    {
        "id": 22,
        "col_id": 16,
        "data": "Once upon a star"
    },
    {
        "id": 27,
        "col_id": 17,
        "data": "10"        
    },
    {
        "id": 40,
        "col_id": 19,
        "data": "80"
    },
    {
        "id": 53,
        "col_id": 17,
        "data": "32"        
    },
    ....
]

I have another array of objects called toBeKeysArray , also an unknown number (it could be 2 as in the code below or 30):

toBeKeysArray = [
    {
        "seriesTempHeader": "DEER LAST",
        "id": 17
    },
    {
        "seriesTempHeader": "BLUE ITEM",
        "id": 16
    },
    ......
]

I want to create a new array based on the data in the firstArray and toBeKeysArray.

TARGET ACCORDING TO ABOVE EXAMPLE:

  [{ "deerlast": 42, "blueitem": 80, "category": "None"}]

EXPLANATION: for each object in the firstArray with 'col_id' = 'id' of an item in toBeKeysArray, add the value of 'data' and equal it to the key of a new array where the key is the lowercase and no space version of seriesTempHeader in the right item in toBeKeysArray.

So, in the new array we create the key 'deerlast' and 'blueitem' since they are in toBeKeysArray . 'deerlast' has value 42 because in the firstArray , 2 items have col_id 17, which is the id of 'DEER LAST' in toBeKeysArray. As such, we add the 'data' value of those two items.

For 'blueitem', the only object in firstArray to have col_id = 16 is the one with 'data' = 80.

Please note that "category": "None" is always going to be part of the target array and can be hardcoded.

So far, I have the following:

        // Retrieve the ids of toBeKeysArray
        let targetIds = toBeKeysArray.map((obj) => obj.id);

        var targetArray = ["category": "None"]

        // For each item in the first array, if the col_id is part of the targetIds, populate the new array
        firstArray.forEach(element => {
            if(targetIds.includes(element.col_id)) {
                this.targetArray.push("toBeKeysArray.seriesTempHeader": +data)
            }
        });

However, it does not result in the correct solution. Based on the information above, how would I be able to get the target array?

Answer 1

You map to iterate over the toBeKeysArray and then you search the firstArray by filtering out the ones that don't match the col_id.

PS.: The numbers.filter with the !isNaN(...) is due to one of the datas being a string. You may need to tweak some of the code here, but I think this is the main idea

const result = toBeKeysArray.map((key) => {

   const numbers = firstArray.filter(data => data.col_id === key.id);
   
    return {
     [key.seriesTempHeader]: numbers.filter(number => !isNaN(parseInt(number.data, 10))).reduce((acc, number) => acc + parseInt(number.data, 10), 0)
  };

});

console.log(result);