Build the format from 3 arrays?

[walker1234Participant]

Is there any example showing how to build 3 level hierarchy if I have 3 arrays with me such that var employees kind of format be achieved as shown in the JS editor shown below.

https://jseditor.io/?key=jqwidgets-tree-grid-template

The data is hard coded so I was looking if there is an example which can show me how to build that format if I have 3 arrays for top level hierarchy, middle level hierarchy and lower level hirarchy.

[svetoslav_borislavovParticipant]

Hi,

You may see the following demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/index.htm#demos/jqxtreegrid/javascript-tree-grid-binding-to-array.htm

You can merge the three arrays and map the parent with the children with a property (like in the demo: parentid)

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[walker1234Participant]

I saw that and included the link for the same post in my example but the question, your var employees top level data contains children elements. So if I have 3 array, then how should I go about it?

In your example:

1. One array has data with "EmployeeID": 2, in it, this seems like parent employee.
2. Second array has data containing "EmployeeID": 8,1,3,4 and 5 which is the child of first array.
3. Third array containing EmployeeID": 6,7 and 9 which is the child of second array.

If I have 3 arrays (array 1 contains parent elements, array 2 contains child of array 2 and array 3 is child of array 2), I am wondering if I can combine it in such a way, such that I could generate data in the format shown below:

var employees = [
            {
                "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way", "expanded": "true",
                children: [
                { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
                { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
                { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
                { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
                {
                    "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill", "expanded": "true",
                    children: [
                           { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
                           { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
                           { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
                    ]
                }
                ]
            }
        ];

The thing that is PUZZLING me is how to add children: <my array2 here> and children: <my array3 here> as shown in the above format.

[walker1234Participant]

I will add more of what I’m looking. Let’s say I have three arrays:

var array1 = [{"EmployeeID": 2,"FirstName": "Andrew", "LastName": "Fuller", "City": "Tacoma"}];		

var array2 = [ { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan","City": "Seattle"},  { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio","City": "Seattle"},
}];

var array3 = [{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama","City": "London" },  { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "City": "London" }];

How can I build the data format compatible with the grid such that my first array contains "expanded": "true" and then children below it as a second array(array2). Similarly for displaying array2 below array 3 and displaying children:[ wherever needed such that the final output looks like following:

var employees = [
            {
                "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "City": "Tacoma",  "expanded": "true",
                children: [
                { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan","City": "Seattle"},
                { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio","City": "Seattle"},
               
                {
                    "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "expanded": "true",
                    children: [
                           { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama","City": "London" },
                           { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "City": "London" }
                          
                    ]
                }
                ]
            }
        ];

Is the above format achievable with 3 arrays or is there something else I need to use here?

[Author]

Posts