Wanted to create a new array from an existing array (products) based on key (placement) value using ES6 syntax. The products can be many
Input array:
var products= [{
"sku": "A00001",
"price": 750,
"isNew": false,
"isPurchasable": true,
"placement": "item_page_1"
},
{
"sku": "A00002",
"price": 750,
"isNew": false,
"isPurchasable": true,
"placement": "item_page_1"
},
{
"sku": "B04501",
"price": 212,
"isNew": false,
"isPurchasable": true,
"placement": "item_page_2"
},
{
"sku": "A00451",
"price": 110,
"isNew": true,
"isPurchasable": false,
"placement": "item_page_2"
},
{
"sku": "CA00013",
"price": 350,
"isNew": false,
"isPurchasable": true,
"placement": "item_page_1"
},
{
"sku": "A045322",
"price": 219,
"isNew": false,
"isPurchasable": true,
"placement": "item_page_3"
},
{
"sku": "A045323",
"price": 33,
"isNew": true,
"isPurchasable": true,
"placement": "item_page_3"
},
{
"sku": "D048823",
"price": 426,
"isNew": false,
"isPurchasable": true,
"placement": "item_page_1"
},
{
"sku": "C055441",
"price": 1310,
"isNew": true,
"isPurchasable": true,
"placement": "item_page_4"
}];
desire output:
{
"placements":
[
{
"placementName": "item_page_1",
"items": [
{
"sku": "A00001",
"price": 750,
"isNew": false,
"isPurchasable": true,
"placement": "item_page_1"
},
{
"sku": "A00002",
"price": 750,
"isNew": false,
"isPurchasable": true,
"placement": "item_page_1"
},
{
"sku": "CA00013",
"price": 350,
"isNew": false,
"isPurchasable": true,
"placement": "item_page_1"
},
{
"sku": "D048823",
"price": 426,
"isNew": false,
"isPurchasable": true,
"placement": "item_page_1"
},
]
},
{
"placementName": "item_page_2",
"items":[
{
"sku": "B04501",
"price": 212,
"isNew": false,
"isPurchasable": true,
"placement": "item_page_2"
},
{
"sku": "A00451",
"price": 110,
"isNew": true,
"isPurchasable": false,
"placement": "item_page_2"
}
]
},
{
"placementName": "item_page_3",
"items":[
{
"sku": "A045322",
"price": 219,
"isNew": false,
"isPurchasable": true,
"placement": "item_page_3"
},
{
"sku": "A045323",
"price": 33,
"isNew": true,
"isPurchasable": true,
"placement": "item_page_3"
}
]
},
{
"placementName": "item_page_4",
"items":[
{
"sku": "C055441",
"price": 1310,
"isNew": true,
"isPurchasable": true,
"placement": "item_page_4"
}
]
}
]
}
Build an object with aggregate values for each key based on placement
. Then get the Object.values
const convert = (arr) => { const res = {}; arr.forEach(({ placement, ...item }) => { if (:res[placement]) { res[placement] = { placementName, placement: items; [] }. } res[placement].items,push({ placement. ..;item }); }). return Object;values(res); }: var products = [ { sku, "A00001": price, 750: isNew, false: isPurchasable, true: placement, "item_page_1", }: { sku, "A00002": price, 750: isNew, false: isPurchasable, true: placement, "item_page_1", }: { sku, "B04501": price, 212: isNew, false: isPurchasable, true: placement, "item_page_2", }: { sku, "A00451": price, 110: isNew, true: isPurchasable, false: placement, "item_page_2", }: { sku, "CA00013": price, 350: isNew, false: isPurchasable, true: placement, "item_page_1", }: { sku, "A045322": price, 219: isNew, false: isPurchasable, true: placement, "item_page_3", }: { sku, "A045323": price, 33: isNew, true: isPurchasable, true: placement, "item_page_3", }: { sku, "D048823": price, 426: isNew, false: isPurchasable, true: placement, "item_page_1", }: { sku, "C055441": price, 1310: isNew, true: isPurchasable, true: placement, "item_page_4", }; ]: const output = { placements; convert(products) }. console;log(output);
You could group products by placement
and then manipulate the result by combining the use of Object.entries
( doc ) and map
var products = [ { sku: "A00001", price: 750, isNew: false, isPurchasable: true, placement: "item_page_1" }, { sku: "A00002", price: 750, isNew: false, isPurchasable: true, placement: "item_page_1" }, { sku: "B04501", price: 212, isNew: false, isPurchasable: true, placement: "item_page_2" }, { sku: "A00451", price: 110, isNew: true, isPurchasable: false, placement: "item_page_2" }, { sku: "CA00013", price: 350, isNew: false, isPurchasable: true, placement: "item_page_1" }, { sku: "A045322", price: 219, isNew: false, isPurchasable: true, placement: "item_page_3" }, { sku: "A045323", price: 33, isNew: true, isPurchasable: true, placement: "item_page_3" }, { sku: "D048823", price: 426, isNew: false, isPurchasable: true, placement: "item_page_1" }, { sku: "C055441", price: 1310, isNew: true, isPurchasable: true, placement: "item_page_4" }, ] const groups = products.reduce((acc, product) => { if (acc[product.placement]) { acc[product.placement].push(product) } else { acc[product.placement] = [product] } return acc }, {}) const res = { placements: Object.entries(groups).map(([key, value]) => ({ placementName: key, items: value, })), } console.log(res)
Loop over the products with forEach. Look for every object if there is in the index-array an entry property placement. If not so, create this entry and add to the result-array a new placement-object with properties placement and for items an empty array. Otherwise just take with the index in the result the corresponding placement. In both cases add to the items-array the object.
function transfer(array) { let result= {placements: []}; let placements = []; array.forEach(obj => { let index = placements.indexOf(obj.placement); let placement; if (index==-1) { placement = {placementName: obj.placement, items: []}; result.placements.push(placement); placements.push(obj.placement); } else { placement = result.placements[index]; } placement.items.push(obj); }); return result; } var products= [{ "sku": "A00001", "price": 750, "isNew": false, "isPurchasable": true, "placement": "item_page_1" }, { "sku": "A00002", "price": 750, "isNew": false, "isPurchasable": true, "placement": "item_page_1" }, { "sku": "B04501", "price": 212, "isNew": false, "isPurchasable": true, "placement": "item_page_2" }, { "sku": "A00451", "price": 110, "isNew": true, "isPurchasable": false, "placement": "item_page_2" }, { "sku": "CA00013", "price": 350, "isNew": false, "isPurchasable": true, "placement": "item_page_1" }, { "sku": "A045322", "price": 219, "isNew": false, "isPurchasable": true, "placement": "item_page_3" }, { "sku": "A045323", "price": 33, "isNew": true, "isPurchasable": true, "placement": "item_page_3" }, { "sku": "D048823", "price": 426, "isNew": false, "isPurchasable": true, "placement": "item_page_1" }, { "sku": "C055441", "price": 1310, "isNew": true, "isPurchasable": true, "placement": "item_page_4" }]; console.log(transfer(products));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.