Javascript - Flatten/Merge and Fill Array

Jaitsujin
September 19, 2023
189 views
2 votes
3 Answers

I am trying to create and new array from and existing one.
The new one needs to include zero values for missing data.
Additionally the categories are corresponding to months and need to be replaced.

Original Array

[
    {
        "name": "2023",
        "data": 10,
        "categories": 7
    },
    {
        "name": "2023",
        "data": 1688,
        "categories": 8
    },
    {
        "name": "2023",
        "data": 373,
        "categories": 9
    },
    {
        "name": "2022",
        "data": 211,
        "categories": 9
    }
]

New Array

[
    {
        name: "2022",
        data: [44, 55, 41, 37, 22, 43, 21, 33, 52, 13, 43, 32],
        categories: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

    },
    {
        name: "2023",
        data: [424, 43, 66, 11, 22, 21, 32, 43, 55, 6, 86, 42],
        categories: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

    }
]

The issue is that i need create this new array with all 12 months for each available year and if the month is missing it should default to 0.

The new array would basically look like this with the original data provided above.

[
    {
        name: "2022",
        data: [0,0,0,0,0,0,0,0,211,0,0,0,],
        categories: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

    },
    {
        name: "2023",
        data: [0,0,0,0,0,0,10,1688,373,0,0,0,],
        categories: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

    }
]

I’m not sure if that’s even possible, but any help is greatly appreciated.

I’ve tried all sorts of techniques, but get stuck on auto filling data for missing months.

Tags: javascript

Answers

You can use Array#reduce with an object to store the data for each year.

const arr=[{name:"2023",data:10,categories:7},{name:"2023",data:1688,categories:8},{name:"2023",data:373,categories:9},{name:"2022",data:211,categories:9}];
const res = Object.values(arr.reduce((acc, {name, data, categories}) => {
  (acc[name] ??= {name, data: Array(12).fill(0), categories: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]})
    .data[categories - 1] = data;
  return acc;
}, {}));
console.log(res);

Simple reduce will do it

const input = [
    {
        "name": "2023",
        "data": 10,
        "categories": 7
    },
    {
        "name": "2023",
        "data": 1688,
        "categories": 8
    },
    {
        "name": "2023",
        "data": 373,
        "categories": 9
    },
    {
        "name": "2022",
        "data": 211,
        "categories": 9
    }
];
const result = input.reduce((result, item) => {
    let year = result.find(({name}) => name === item.name);
    if (!year) {
        year = {
            name: item.name,
            data: new Array(12).fill(0),
            categories: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
        };
        result.push(year);
    }
    year.data[item.categories - 1] = item.data;
    return result;
}, []).sort(({name:a}, {name:b}) => +a - b);
console.log(result);

Here is a Codepen sample, that might do the trick.

https://codepen.io/bellmorecode/pen/JjwEoyw

Here is the code:

let orig = [
    {
        "name": "2023",
        "data": 10,
        "categories": 7
    },
    {
        "name": "2023",
        "data": 1688,
        "categories": 8
    },
    {
        "name": "2023",
        "data": 373,
        "categories": 9
    },
    {
        "name": "2022",
        "data": 211,
        "categories": 9
    }    
];
var resort = function () {
    let output = [];
    for (let x = 0; x < orig.length; x ++) {
        let item = orig[x];
        let match = output.filter(a => a.name == item["name"]);
        if (match && match.length > 0) {
            match[0].data.push(item["data"]);
            match[0].categories.push(item["categories"]);
        } else {
          output.push({
            name: item["name"], data: [ item["data"] ], categories: [ item["categories"] ]
          });
        }
    }
    document.write(JSON.stringify(output));
}
resort();

The output looks like this:

[{"name":"2023","data":[10,1688,373],"categories":[7,8,9]},{"name":"2022","data":[211],"categories":[9]}]

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Flatten/Merge and Fill Array

Answers