Looping through nested array of objects and consolidating values

Question

New to Javascript. Have been at this for hours looking at examples, but I can't seem to get my head around it.

I have an array of objects with nested properties that I'm trying to loop through and consolidate.

var items = [{
        name: "flat bread",
        price: "5",
        components: [
            { qty: 120, unit: "g", ingredient: { name: "flour", price: 1, perAmount: 1, unit: "kg" } },
            { qty: 250, unit: "mL", ingredient: { name: "milk", price: 4, perAmount: 3, unit: "litre" } },
            { qty: 1.5, unit: "g", ingredient: { name: "salt", price: 1.2, perAmount: 1, unit: "kg" } },
            { qty: 28.35, unit: "g", ingredient: { name: "butter", price: "6", perAmount: 500, unit: "g" } }
        ]
    },
    {
        name: "pancake",
        price: "15",
        components: [
            { qty: 120, unit: "g", ingredient: { name: "flour", price: 1, perAmount: 1, unit: "kg" } },
            { qty: 250, unit: "mL", ingredient: { name: "milk", price: 4, perAmount: 3, unit: "litre" } },
            { qty: 2, unit: "each", ingredient: { name: "egg", price: 5, perAmount: 12, unit: "each" } },
            { qty: 12.5, unit: "g", ingredient: { name: "sugar", price: 2.20, perAmount: 2, unit: "kg" } }
        ]
    },
    {
        name: "crepe",
        price: "10",
        components: [
            { qty: 120, unit: "g", ingredient: { name: "flour", price: 1, perAmount: 1, unit: "kg" } },
            { qty: 250, unit: "mL", ingredient: { name: "milk", price: 4, perAmount: 3, unit: "litre" } },
            { qty: 2, unit: "each", ingredient: { name: "egg", price: 5, perAmount: 12, unit: "each" } },
            { qty: 28.35, unit: "g", ingredient: { name: "butter", price: "6", perAmount: 500, unit: "g" } }
        ]
    }
];


consolidatedComponents = items.map((item) => {
    return { components: item.components }
});
console.log(consolidatedComponents);

I'm trying to get a result like this to return:

360g flour
750ml milk
1.5g salt 4 eggs
12.5g sugar
56.7g butter

I realise I will need to convert the units down the track, but let's assume they are all the same across the items/ingredients

Yes. Let's assume they are always the same for now. I just want to focus on consolidating the components — Joseph P
– Joseph P, Commented Jul 23, 2022 at 8:45
@NinaScholz the structure you have provided in your answer is perfect. I'm looking into the reduce method right now to try and understand exactly how your code works just to make sure there won't be any problems — Joseph P
– Joseph P, Commented Jul 23, 2022 at 9:03

Nina Scholz · Accepted Answer · 2022-07-23 08:45:46Z

1

You could take an object to collect all items grouped by ingredient.

If you like to get a list, iterate the object.

const
    items = [{ name: "flat bread", price: "5", components: [{ qty: 120, unit: "g", ingredient: { name: "flour", price: 1, perAmount: 1, unit: "kg" } }, { qty: 250, unit: "mL", ingredient: { name: "milk", price: 4, perAmount: 3, unit: "litre" } }, { qty: 1.5, unit: "g", ingredient: { name: "salt", price: 1.2, perAmount: 1, unit: "kg" } }, { qty: 28.35, unit: "g", ingredient: { name: "butter", price: "6", perAmount: 500, unit: "g" } }] }, { name: "pancake", price: "15", components: [{ qty: 120, unit: "g", ingredient: { name: "flour", price: 1, perAmount: 1, unit: "kg" } }, { qty: 250, unit: "mL", ingredient: { name: "milk", price: 4, perAmount: 3, unit: "litre" } }, { qty: 2, unit: "each", ingredient: { name: "egg", price: 5, perAmount: 12, unit: "each" } }, { qty: 12.5, unit: "g", ingredient: { name: "sugar", price: 2.20, perAmount: 2, unit: "kg" } }] }, { name: "crepe", price: "10", components: [{ qty: 120, unit: "g", ingredient: { name: "flour", price: 1, perAmount: 1, unit: "kg" } }, { qty: 250, unit: "mL", ingredient: { name: "milk", price: 4, perAmount: 3, unit: "litre" } }, { qty: 2, unit: "each", ingredient: { name: "egg", price: 5, perAmount: 12, unit: "each" } }, { qty: 28.35, unit: "g", ingredient: { name: "butter", price: "6", perAmount: 500, unit: "g" } }] }],
    consolidatedComponents = items.reduce((r, { components }) => {
        components.forEach(({ qty, unit, ingredient: { name } }) => {
            r[name] ??= { unit, qty: 0 };
            r[name].qty += qty;        
        });
        return r;
    }, {});
    
console.log(consolidatedComponents);

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

answered Jul 23, 2022 at 8:45

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joseph P Over a year ago

The way you spun that together in 5 minutes blows my mind. I have never seen the " ??= " operator before so I'm going to read into that, thank you

Joseph P Over a year ago

Thank you for this. This has lead me to read about the reduce() method and also the arrow function. I have so much left to learn!

Joseph P Over a year ago

Updated solution can be found here: stackoverflow.com/questions/73093137/…

Collectives™ on Stack Overflow

Looping through nested array of objects and consolidating values

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related