Home  >  Q&A  >  body text

The rewritten title is: Merge three arrays into data similar to a tree structure

If I have the following data as follows:

var data = [{
    "EmployeeID": 2,
    "FirstName": "Andrew",
    "LastName": "Fuller",
    "Country": "USA",
    "Title": "副总裁,销售",
    "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": "内部销售协调员",
            "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": "销售代表",
            "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": "销售代表",
            "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": "销售代表",
            "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": "销售经理",
            "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": "销售代表",
                    "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": "销售代表",
                    "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": "销售代表",
                    "HireDate": "1994-11-15 00:00:00",
                    "BirthDate": "1966-01-27 00:00:00",
                    "City": "London",
                    "Address": "7 Houndstooth Rd."
                }
            ]
        }
    ]
}];

console.log(data);

I have separate Ajax calls for each parent's children property and they return an array. Is it possible to combine these three arrays to produce an array like the one shown in the fiddle?

The original source of the above data is here, which is obtained from here

More explanations I want:

I have 3 arrays on hand.

  1. An array contains data of "EmployeeID": 2,.
  2. The second array contains "EmployeeID": 8,1,3,4 and 5, which are children of the first array.
  3. The third array contains "EmployeeID": 6, 7 and 9, which are children of the second array.

I got all the above arrays (not shown above) via Ajax calls and was wondering if I could combine them in this way to produce data in the above format. What confuses me is how to add children like in the format above: .

P粉203792468P粉203792468378 days ago443

reply all(1)I'll reply

  • P粉276577460

    P粉2765774602023-09-07 11:24:21

    Here you can try this logic:
    We can pass data with nested structure, for example:
    data->childrenArray->data->childrenArray etc. In MakeNestedInLinear(data), it will return the flat results in a single array (linear data)

    var data = [
      {
        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.",
              },
            ],
          },
        ],
      },
    ];
    
    function MakeNestedInLinear(data) {
      return data.reduce((acc, elem) => {
        let stack = [elem];
        while (stack.length) {
          let val = stack.shift();
          if (val && val.children) {
            stack.push(...val.children);
            delete val.children;
            acc.push(val);
          } else acc.push(val);
        }
        return acc;
      }, []);
    }
    
    console.log(MakeNestedInLinear(data));

    reply
    0
  • Cancelreply