Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Move elements to first position in nested array

I want to move an element to first position from an inner array like below

{
 "activeContainerId": "955bd18f-6561-44b4-ba8f-7094e4e183b8",
  "amendCartContainers": [],
  "data": [
    {
        "id": "955bd18f-6561-44b4-ba8f-7094e4e183b8",
        "categoryName": "My_Category_Name",
        "categoryId": "cat_spc_my_category",
        "sections": [
            {
                "id": "cat_spc_my_id",
                "title": "APPLE",
                "items": [
                    {
                        "id": "a6d89ee2-6832-43e4-85ea-6ec541f06c36",
                        "action": "add",
                        "title": "Apple iPhone 11",
                        "characteristics": [
                            ----
                        ],
                        "promotions": [],
                        "quantity": 1,
                        "oneTimePrice": [
                            {
                                ----
                            }
                        ],
                        "recurringPrice": [],
                        "totalOneTimePrice": [
                            {
                                ----
                            }
                        ],
                        
                    }
                ]
            },
            {
                "id": "cat_spc_my_id2",
                "title": "My_Title2",
                "items": [
                    {
                        "id": "0ea7cade-96e0-4e5d-8baf-ace2f7ce123f",
                        "action": "add",
                        "title": "My Inner title2",
                        "characteristics": [],
                        "promotions": [],
                        "quantity": 1,
                        "addedBySCRuleEngine": true,
                        "oneTimePrice": [
                            {
                                ----
                            }
                        ],
                        "recurringPrice": [],
                        "totalOneTimePrice": [
                            {
                                ----
                            }
                        ],
                        "totalPriceRecurring": []
                    }
                ]
            },
            {
                "id": "cat_spc_my_special_id",
                "title": "my_special_title",
                "items": [
                    {
                        "id": "870d3871-6a0c-42f2-b123-9d75a3f3e3ee",
                        "action": "add",
                        "title": "my inner title3",
                        "characteristics": [],
                        "promotions": [
                            {
                                ----
                            }
                        ],
                        "quantity": 1,
                        "itemTerm": [
                            {
                                "duration": {
                                    "amount": 12,
                                    "units": "Month"
                                }
                            }
                        ],
                        "oneTimePrice": [
                            {
                                -----
                            }
                        ],
                        "recurringPrice": [
                            {
                                -----
                            }
                        ],
                        "totalOneTimePrice": [
                            {
                                -----
                            }
                        ],
                        "totalPriceRecurring": [
                            {
                                -----
                            }
                        ]
                    }
                ]
            },
            {
                "id": "cat_spc_my_id4",
                "title": "my_title4",
                "items": [
                    {
                        "id": "1011730c-d8d2-45ac-8ee2-98f981184a85",
                        "action": "add",
                        "title": "my_title4",
                        "characteristics": [],
                        "promotions": [],
                        "quantity": 1,
                        "oneTimePrice": [
                            {
                                -----
                            }
                    }
                ]
            }
        ],
        "totalPriceOneTime": [
            {
                ----
            }
        ],
        "totalPriceRecurring": [
            {
                ----
            }
        ],
        "promotions": [],
        "notes": [],
        "processContext": "ACQ",
        "visibilityInSection": {
            "id": "bo_lov_visibilityinsection_section1",
            "name": "Section 1",
            "visibilityOrder": 1
        }
    }
],
"applyCouponStatus": null,
"promotions": [],
"totalPriceOneTime": [
    {
        "dutyFreeAmount": {
            "unit": "price_unit",
            "value": 479.68
        },
        "taxIncludedAmount": {
            "unit": "price_unit",
            "value": 580.41
        },
        "dutyFreeAlteredAmount": {
            "unit": "price_unit",
            "value": 479.68
        },
        "taxIncludedAlteredAmount": {
            "unit": "price_unit",
            "value": 580.41
        },
        "taxAmount": 100.73,
        "amountPayable": {
            "unit": "price_unit",
            "value": 580.41
        }
    }
],
"totalPriceRecurring": [
    {
        "dutyFreeAmount": {
            "unit": "price_unit",
            "value": 41.32
        },
        "taxIncludedAmount": {
            "unit": "price_unit",
            "value": 50
        },
        "dutyFreeAlteredAmount": {
            "unit": "price_unit",
            "value": 24.79
        },
        "taxIncludedAlteredAmount": {
            "unit": "price_unit",
            "value": 30
        },
        "taxAmount": 5.21,
        "amountPayable": {
            "unit": "price_unit",
            "value": 30
        }
    }
 ]
}

There are 4 items currently in the above array and I want to filter and move the id ‘cat_spc_my_special_id’ from ‘data.sections to the top of list. Keyword that I want to use is ‘special’ in this case.

I have tried below

Try1:

let filterKey = 'special';
const shoppingBagNew = shoppingBag?.data?. 
[0]?.sections.filter(function(x,y){
   return x == filterKey ? -1 : y == filterKey ? 1 : 0;
})

Try2:

const sections = shoppingBag?.data?.[0]?.sections;
const RedIndex = shoppingBag?.data?.[0]?.sections.findIndex(section => 
section.id == 'special');
 shoppingBag?.data?.[0]?.sections.push(...sections.splice(0, RedIndex));
 console.log('shoppingBag after filter',shoppingBag);

I knew that moving to the top of list is possible for only normal array of items which is not a nested array but Is this possible for a nested array like above? Any help would be appreciated..! Thanks.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After so much effort I got a solution, I have used 'structuredClone' method it will do a deep copy of original object

    const cloneShoppingBag = structuredClone(shoppingBag);
let sortCartSections = cloneShoppingBag?.data?.[0]?.sections;
if (sortCartSections) {
  sortCartSections.sort((a, b) =>
    a.title.includes("RED") && -1
  );
}
console.log('sortCartSections after sort',sortCartSections);

  2. 0

    .filter() does not sort an array. You need to use .sort() instead:

    const shoppingBag={"activeContainerId":"955bd18f-6561-44b4-ba8f-7094e4e183b8","amendCartContainers":[],"data":[{"id":"955bd18f-6561-44b4-ba8f-7094e4e183b8","categoryName":"My_Category_Name","categoryId":"cat_spc_my_category","sections":[{"id":"cat_spc_my_id","title":"APPLE","items":[{"id":"a6d89ee2-6832-43e4-85ea-6ec541f06c36","action":"add","title":"Apple iPhone 11","characteristics":["something else"],"promotions":[],"quantity":1,"oneTimePrice":[{"something":"else"}],"recurringPrice":[],"totalOneTimePrice":[{"something":"else"}]}]},{"id":"cat_spc_my_id2","title":"My_Title2","items":[{"id":"0ea7cade-96e0-4e5d-8baf-ace2f7ce123f","action":"add","title":"My Inner title2","characteristics":[],"promotions":[],"quantity":1,"addedBySCRuleEngine":true,"oneTimePrice":[{"something":"else"}],"recurringPrice":[],"totalOneTimePrice":[{"something":"else"}],"totalPriceRecurring":[]}]},{"id":"cat_spc_my_special_id","title":"my_special_title","items":[{"id":"870d3871-6a0c-42f2-b123-9d75a3f3e3ee","action":"add","title":"my inner title3","characteristics":[],"promotions":[{"something":"else"}],"quantity":1,"itemTerm":[{"duration":{"amount":12,"units":"Month"}}],"oneTimePrice":[{"something":"else"}],"recurringPrice":[{"something":"else"}],"totalOneTimePrice":[{"something":"else"}],"totalPriceRecurring":[{"something":"else"}]}]},{"id":"cat_spc_my_id4","title":"my_title4","items":[{"id":"1011730c-d8d2-45ac-8ee2-98f981184a85","action":"add","title":"my_title4","characteristics":[],"promotions":[],"quantity":1,"oneTimePrice":[{"something":"else"}]}]}],"totalPriceOneTime":[{"something":"else"}],"totalPriceRecurring":[{"something":"else"}],"promotions":[],"notes":[],"processContext":"ACQ","visibilityInSection":{"id":"bo_lov_visibilityinsection_section1","name":"Section 1","visibilityOrder":1}}],"applyCouponStatus":null,"promotions":[],"totalPriceOneTime":[{"dutyFreeAmount":{"unit":"price_unit","value":479.68},"taxIncludedAmount":{"unit":"price_unit","value":580.41},"dutyFreeAlteredAmount":{"unit":"price_unit","value":479.68},"taxIncludedAlteredAmount":{"unit":"price_unit","value":580.41},"taxAmount":100.73,"amountPayable":{"unit":"price_unit","value":580.41}}],"totalPriceRecurring":[{"dutyFreeAmount":{"unit":"price_unit","value":41.32},"taxIncludedAmount":{"unit":"price_unit","value":50},"dutyFreeAlteredAmount":{"unit":"price_unit","value":24.79},"taxIncludedAlteredAmount":{"unit":"price_unit","value":30},"taxAmount":5.21,"amountPayable":{"unit":"price_unit","value":30}}]};

shoppingBag.data[0].sections.sort((a,b)=>
  a.id.includes("special")? -1 : b.id.includes("special") ? 1 : a.id.localeCompare(b.id)
);

// list ids of resulting array:
console.log(shoppingBag.data[0].sections.map(({id})=>id))

    If you simply want to move the element containing "special" in its id to the top you should replace a.id.localeCompare(b.id) by 0 in the above .sort() function. This will keep the original order intact.

    And, to answer your question concerning "nested" arrays: an array is an array is an array – no matter what type of elements are in it or whether it is nested or not. The sort() function works on the array "in place".

    Btw, your "TRY 2" approach will also work (with a few little changes):

    const shoppingBag={"activeContainerId":"955bd18f-6561-44b4-ba8f-7094e4e183b8","amendCartContainers":[],"data":[{"id":"955bd18f-6561-44b4-ba8f-7094e4e183b8","categoryName":"My_Category_Name","categoryId":"cat_spc_my_category","sections":[{"id":"cat_spc_my_id","title":"APPLE","items":[{"id":"a6d89ee2-6832-43e4-85ea-6ec541f06c36","action":"add","title":"Apple iPhone 11","characteristics":["something else"],"promotions":[],"quantity":1,"oneTimePrice":[{"something":"else"}],"recurringPrice":[],"totalOneTimePrice":[{"something":"else"}]}]},{"id":"cat_spc_my_id2","title":"My_Title2","items":[{"id":"0ea7cade-96e0-4e5d-8baf-ace2f7ce123f","action":"add","title":"My Inner title2","characteristics":[],"promotions":[],"quantity":1,"addedBySCRuleEngine":true,"oneTimePrice":[{"something":"else"}],"recurringPrice":[],"totalOneTimePrice":[{"something":"else"}],"totalPriceRecurring":[]}]},{"id":"cat_spc_my_special_id","title":"my_special_title","items":[{"id":"870d3871-6a0c-42f2-b123-9d75a3f3e3ee","action":"add","title":"my inner title3","characteristics":[],"promotions":[{"something":"else"}],"quantity":1,"itemTerm":[{"duration":{"amount":12,"units":"Month"}}],"oneTimePrice":[{"something":"else"}],"recurringPrice":[{"something":"else"}],"totalOneTimePrice":[{"something":"else"}],"totalPriceRecurring":[{"something":"else"}]}]},{"id":"cat_spc_my_id4","title":"my_title4","items":[{"id":"1011730c-d8d2-45ac-8ee2-98f981184a85","action":"add","title":"my_title4","characteristics":[],"promotions":[],"quantity":1,"oneTimePrice":[{"something":"else"}]}]}],"totalPriceOneTime":[{"something":"else"}],"totalPriceRecurring":[{"something":"else"}],"promotions":[],"notes":[],"processContext":"ACQ","visibilityInSection":{"id":"bo_lov_visibilityinsection_section1","name":"Section 1","visibilityOrder":1}}],"applyCouponStatus":null,"promotions":[],"totalPriceOneTime":[{"dutyFreeAmount":{"unit":"price_unit","value":479.68},"taxIncludedAmount":{"unit":"price_unit","value":580.41},"dutyFreeAlteredAmount":{"unit":"price_unit","value":479.68},"taxIncludedAlteredAmount":{"unit":"price_unit","value":580.41},"taxAmount":100.73,"amountPayable":{"unit":"price_unit","value":580.41}}],"totalPriceRecurring":[{"dutyFreeAmount":{"unit":"price_unit","value":41.32},"taxIncludedAmount":{"unit":"price_unit","value":50},"dutyFreeAlteredAmount":{"unit":"price_unit","value":24.79},"taxIncludedAlteredAmount":{"unit":"price_unit","value":30},"taxAmount":5.21,"amountPayable":{"unit":"price_unit","value":30}}]};

// "TRY 2" of OP:
const sections = shoppingBag.data[0].sections,
      RedIndex = sections.findIndex(section => section.id.includes('special'));
 shoppingBag.data[0].sections.unshift(...sections.splice(RedIndex,1));
 
 // list ids of resulting array:
console.log(shoppingBag.data[0].sections.map(({id})=>id))

    Instead of .push() which woud append an element to the end of an array you should use .unshift() which places it at the beginning of the array. And the .splice() should happen at the position where you found the "special" case:

    shoppingBag.data[0].sections.unshift(...sections.splice(RedIndex,1));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search