Nested List

makeNestedList is a method that allows to create the list of fields with infinite nesting. It takes an array of fields and depends of their IDs makes attachments for each of them.

The current method can accept five arguments but only three of them are mandatory. More details in the next chapter.

The calling of the method is looks like this:

import GudHub from '@gudhub/core';
const gudhub = new GudHub();
let input = [{
    name: "Article 1",
    id: 1,
    parent_id: 0
},{
    name: "Article 2",
    id: 2,
    parent_id: 0
}];

gudhub.makeNestedList(arr, 'id', 'parent_id', 'children', 'priority')

As a result, the method returns an array of objects that have no parent. If they have children, the objects get a new property "children". Objects that have a parent are in the child array of the corresponding object.

[{
    "name": "Article 1",
    "id": 1,
    "parent_id": 0,
    "children": [{
        "name": "Article 2",
        "id": 2,
        "parent_id": 0
    }]
}]

Arguments

As mentioned above, three method arguments are mandatory, the rest are not.

Mandatory:

• arr - array of fields which have at least three properties: name, ID, and parent ID.
• id - self ID of the field
• parent_id - ID of the field that is the parent of the current field

Optional ones:

• children_property - a name that will be given to the array of child objects.
• priority_property - a name of the property by which fields will be sorted.

All arguments except arr can be called anything, as long as it is a string type. And id and parent_id can also be any numbers.

Using makeNestedList

As mentioned above, the method takes at least three arguments. Therefore, three examples are given below:

• For a set of mandatory arguments only
• For a set of arguments with the property children
• For the full set of mandatory and optional arguments

Three Arguments

The first example shows the method call with only three mandatory arguments:

import GudHub from '@gudhub/core';
const gudhub = new GudHub();
let input = [
    {
        name: "Article 1",
        id: 1,
        parent_id: 0
    },
    {
        name: "Article 2",
        id: 2,
        parent_id: 0
    },
    {
        name: "Article 3",
        id: 3,
        parent_id: 1
    },
    {
        name: "Article 4",
        id: 4,
        parent_id: 2
    },
    {
        name: "Article 5",
        id: 5,
        parent_id: 2
    },
    {
        name: "Article 6",
        id: 6,
        parent_id: 1
    },
    {
        name: "Article 7",
        id: 7,
        parent_id: 3
    }
];

let nestedList = gudhub.makeNestedList(input, 'id', 'parent_id');

nestedList.forEach(field => {
    console.log("name:", field.name);
    console.log("id:", field.id);
    console.log("parent_id:", field.parent_id);
    console.log("children:", field.children);
});

It returns such an array:

[{
    "name": "Article 1",
    "id": 1,
    "parent_id": 0,
    "children": [{ 
        "name": "Article 3", 
        "id": 3, 
        "parent_id": 1, 
        "children": [{
            "name": "Article 7",
            "id": 7,
            "parent_id": 3
        }] 
    },{ 
        "name": "Article 6", 
        "id": 6, 
        "parent_id": 1 
    }]
},{
    "name": "Article 2",
    "id": 2,
    "parent_id": 0,
    "children": [{ 
        "name": "Article 4", 
        "id": 4, 
        "parent_id": 2 
    },{ 
        "name": "Article 5", 
        "id": 5, 
        "parent_id": 2 
    }]
}]

Four Arguments

The second example is calling the method with mandatory arguments and the new name of the children array.

import GudHub from '@gudhub/core';
const gudhub = new GudHub();
let input = [
    {
        name: "Article 1",
        id: 1,
        parent_id: 0
    },
    {
        name: "Article 2",
        id: 2,
        parent_id: 0
    },
    {
        name: "Article 3",
        id: 3,
        parent_id: 1
    },
    {
        name: "Article 4",
        id: 4,
        parent_id: 2
    },
    {
        name: "Article 5",
        id: 5,
        parent_id: 2
    },
    {
        name: "Article 6",
        id: 6,
        parent_id: 1
    },
    {
        name: "Article 7",
        id: 7,
        parent_id: 3
    }
];

let nestedList = gudhub.makeNestedList(input, 'id', 'parent_id', 'children_new');

nestedList.forEach(field => {
    console.log("name:", field.name);
    console.log("id:", field.id);
    console.log("parent_id:", field.parent_id);
    console.log("children_new:", field.children_new);
});

The following result is returned:

[{
    "name": "Article 1",
    "id": 1,
    "parent_id": 0,
    "children_new": [{ 
        "name": "Article 3", 
        "id": 3, 
        "parent_id": 1, 
        "children_new": [{
            "name": "Article 7",
            "id": 7,
            "parent_id": 3
        }] 
    },{ 
        "name": "Article 6", 
        "id": 6, 
        "parent_id": 1 
    }]
},{
    "name": "Article 2",
    "id": 2,
    "parent_id": 0,
    "children_new": [{ 
        "name": "Article 4", 
        "id": 4, 
        "parent_id": 2 
    },{ 
        "name": "Article 5", 
        "id": 5, 
        "parent_id": 2 
    }]
}]

Five Arguments

The last example shows how a method is called with all its arguments.

import GudHub from '@gudhub/core';
const gudhub = new GudHub();
let input = [{
        name: "Article 1",
        id: 1,
        parent_id: 0,
        sort_position: 7
    },
    {
        name: "Article 2",
        id: 2,
        parent_id: 0,
        sort_position: 6
    },
    {
        name: "Article 3",
        id: 3,
        parent_id: 1,
        sort_position: 5
    },
    {
        name: "Article 4",
        id: 4,
        parent_id: 2,
        sort_position: 4
    },
    {
        name: "Article 5",
        id: 5,
        parent_id: 2,
        sort_position: 3
    },
    {
        name: "Article 6",
        id: 6,
        parent_id: 1,
        sort_position: 2
    },
    {
        name: "Article 7",
        id: 7,
        parent_id: 3,
        sort_position: 1
}];

let nestedList = gudhub.makeNestedList(input, 'id', 'parent_id', 'children_test', 'sort_position');

nestedList.forEach(field => {
    console.log("name:", field.name);
    console.log("id:", field.id);
    console.log("parent_id:", field.parent_id);
    console.log("sort_position:", field.sort_position);
    console.log("children_test:", field.children_test);
});

It returns an array sorted by the selected property:

[{
    "name": "Article 2",
    "id": 2,
    "parent_id": 0,
    "sort_position": 6,
    "children_test": [{ 
        "name": "Article 5", 
        "id": 5, 
        "parent_id": 2, 
        "sort_position": 3 
    },{ 
        "name": "Article 4", 
        "id": 4, 
        "parent_id": 2, 
        "sort_position": 4 
    }]
  },{
    "name": "Article 1",
    "id": 1,
    "parent_id": 0,
    "sort_position": 7,
    "children_test": [{ 
        "name": "Article 6", 
        "id": 6, 
        "parent_id": 1, 
        "sort_position": 2
    },{
        "name": "Article 3",
        "id": 3,
        "parent_id": 1,
        "sort_position": 5,
        "children_test": [{
            "name": "Article 7",
            "id": 7,
            "parent_id": 3,
            "sort_position": 1
        }]
    }]
}]