Remove duplication of a specific attribute of an object inside an array - Angular - arrays

Question

Consider the following array:
packages = [
{modelName: "flatRate", name:"Enterprise", price: "$150"},
{modelName: "flatRate", name:"Gold", price: "$190"},
{modelName: "usageBased", name:"Enterprise", price: "$50"},
{modelName: "userBased", name:"Extreme", price: "$50"},
]
What I want to achieve is:
Use the packages.modelName as a heading and list all its items under it without repeating modelName. For Example:
flatRate
Enterprise ($150) , Gold ($190)
usageBased
Enterprise ($50)
userBased
Extreme ($50)
Notice how 2 objects having modelName: "flatRate" are shown under one heading.
What I've tried:
Take the packages array use a foreach loop on it and remake the array as:
packagesResult = [
{ modelname: "flatRate",
model: [ {name: "Enterprise", price: "$150"} ]
},
{ modelname: "flatRate",
model: [ {name: "Gold", price: "$190"} ]
},
{ modelname: "usageBased",
model: [ {name: "Enterprise", price: "$50"} ]
},
{ modelname: "userBased",
model: [ {name: "Extreme", price: "$50"} ]
},
]
and then tried to use a filter on it using observable but didn't work. Any help will be highly appreciated. Thanks.

Answer 1

Would a reduce like so fit your purpose?
models = packages.reduce((models, package) => {
models[package.name] = package.price;
return models;
}, {})

Answer 2

I would opt for something like the following:
myPackages = {};
function consolidatePayload() {
for(let package of packages){
if(this.myPackages.hasOwnProperty(package.modelName)) {
this.myPackages[package.modelName][package.name] = package.price;
} else {
this.myPackages[package.modelName]= {[package.name]: package.price};
}
}
console.log(this.myPackages);
}
IT gives an and result along the lines of
{
flatRate: {
Enterprise: "$150",
Gold: "$190"
},
usageBased: {
Enterprise: "$50"
},
userBased: {
Extreme: "$50"
}
}
EDIT: reduce inspiration, per #Śaeun acreáť
function consolidatePayload() {
let models = this.packages.reduce((models, package) => {
if(models.hasOwnProperty(package.modelName)) {
models[package.modelName][package.name]= package.price;
} else {
models[package.modelName] = {[package.name]: package.price}
}
return models;
}, {})
}

Answer 3

You can create array of price types for each model name like below ;)
const result = packages = [{
modelName: "flatRate",
name: "Enterprise",
price: "$150"
},
{
modelName: "flatRate",
name: "Gold",
price: "$190"
},
{
modelName: "usageBased",
name: "Enterprise",
price: "$50"
},
{
modelName: "userBased",
name: "Extreme",
price: "$50"
},
].reduce( (acc, item, i) => {
if( i === 0 ) {
acc.push(modifiedObject(item));
return acc;
}
let foundItem = acc.find(it => it.modelName === item.modelName);
if (foundItem) {
addNewPriceType(foundItem, item);
return acc;
} else {
acc.push(modifiedObject(item));
return acc;
}
}, [] );
function modifiedObject(item) {
return {
modelName : item.modelName,
model : [
{ name : item.name, price : item.price }
]
};
}
function addNewPriceType(foundItem, item) {
foundItem.model.push({
name : item.name,
price : item.price
});
}
console.log(result);