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

December 24, 2021

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 sortedData = [];


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

>Solution :

Using item => {parentId == item._id;} does require a ‘return’ to be used: item => {return parentId == item._id;} without the return the functions 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