How to sort an array with parents and children objects with JavaScript?

Question

I have an array with object, which I need to sort in a such way that first the parent object should appear, and then its children objects, and so on. However, when I try to find index of a parent object in array in order to push the children object after it, the findIndex() method returns -1. Can somebody point to the root of this problem, as I cannot clearly see why it does that. The code and data array that I'm using is written below.

const data = [
    {
        "_id": "0",
        "parent": null,
        "title": "All"
    }, {
        "_id": "61c0a9cb8f67e811d55abb2d",
        "parent": null,
        "title": "Electronics"
    }, {
        "_id": "61c0a9cb8f67e811d55abb2e",
        "parent": { "_id": "61c0a9cb8f67e811d55abb2d" },
        "title": "Phones"
    }, {
        "_id": "61c0a9cb8f67e811d55abb2f",
        "parent": { "_id": "61c0a9cb8f67e811d55abb2d" },
        "title": "Laptops"
    }, {
        "_id": "61c0a9cb8f67e811d55abb30",
        "parent": { "_id": "61c0a9cb8f67e811d55abb2d" },
        "title": "TVs"
    }, {
        "_id": "61c0a9cb8f67e811d55abb31",
        "parent": null,
        "title": "Literature"
    }, {
        "_id": "61c0a9cb8f67e811d55abb32",
        "parent": { "_id": "61c0a9cb8f67e811d55abb31"},
        "title": "Study Literature"
    }, {
        "_id": "61c0a9cb8f67e811d55abb33",
        "parent": { "_id": "61c0a9cb8f67e811d55abb31" },
        "title": "Fictional Literature"
    }, {
        "_id": "61c0a9cb8f67e811d55abb34",
        "parent": { "_id": "61c0a9cb8f67e811d55abb31" },
        "title": "Comic books"
    }, {
        "_id": "61c0a9cb8f67e811d55abb35",
        "parent": { "_id": "61c0a9cb8f67e811d55abb2e" },
        "title": "Smartphones"
    }, {
        "_id": "61c0a9cb8f67e811d55abb36",
        "parent": { "_id": "61c0a9cb8f67e811d55abb35" },
        "title": "Accessories"
    }
];


let parents = [];

data.forEach( element => {
    if( element.parent == null ) {
        parents.push(element);
    }
    else {
        let parentId = element.parent._id;
        let index = parents.findIndex(item => {
            item._id == parentId;
        });
        console.log(index);
        parents.splice(index+1, 0, element);
    }
});

What does your expected result look like? Nested arrays for the children or just a single array? — charlietfl
– charlietfl, Commented Dec 24, 2021 at 16:22
Now you changed to using indexOf() but it works very differently than findIndex() and is not applicable to this situation of array of objects — charlietfl
– charlietfl, Commented Dec 24, 2021 at 16:43
Do the children need to immediately follow their specific parent or just have all parents then all children? — charlietfl
– charlietfl, Commented Dec 24, 2021 at 16:44
Thank you very much! Replaced it with findIndex and now it works! — Alen Ichshanov
– Alen Ichshanov, Commented Dec 24, 2021 at 16:47

Sir.Chefcoq · Accepted Answer · 2021-12-25 08:46:41Z

1

Using item => {parentId == item._id;} does require a 'return' to be used: item => {return parentId == item._id;} without the return the function is basically item => null; which is than seen as false by .findIndex() resulting in a -1

If you use the arrow function without the curly braces a return is implied (But limits you to single line expressions as a trade-off): item => parentId == item._id

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

edited Dec 25, 2021 at 8:46

answered Dec 24, 2021 at 16:33

Sir.Chefcoq

3651 silver badge8 bronze badges

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

4 Comments

Alen Ichshanov Over a year ago

I changed the code based on your comment, but nothing changed.

Sir.Chefcoq Over a year ago

@AlenIchshanov Strange did you change let index = sortedData.findIndex(item => { parentId == item._id;}); to let index = sortedData.findIndex(item => { return parentId == item._id; }); ?

Alen Ichshanov Over a year ago

Yeah, now it works, thank you! The other problem was that I tried to use indexOf() instead of findIndex().

Sir.Chefcoq Over a year ago

@AlenIchshanov Ah you changed your code snipped; currently it is still in error (parents.splice(...) should be sortedData.splice(...). You might want to change the snipped back to the original state (when first asked the question); or people might get confused how the answer related to the question and/or keep sending answers/questions

Collectives™ on Stack Overflow

How to sort an array with parents and children objects with JavaScript?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related