다시 작성된 제목은 다음과 같습니다. 세 개의 배열을 트리 구조와 유사한 데이터로 병합

Question

다음과 같은 데이터가 있는 경우:

으아악

각 부모의 children속성에 대해 별도의 Ajax 호출이 있고 배열을 반환합니다. 이 세 가지 배열을 결합하여 바이올린에 표시된 것과 같은 배열을 생성할 수 있습니까?

위 데이터의 원본 출처는 여기이며, 여기에서 얻은 것입니다

내가 원하는 추가 설명:

저는 3개의 어레이를 보유하고 있습니다.

1. 배열에는 "EmployeeID": 2,데이터가 포함되어 있습니다.
2. 두 번째 배열에는 첫 번째 배열의 하위 배열인 "EmployeeID": 8,1,3,4和5가 포함됩니다.
3. 세 번째 배열에는 두 번째 배열의 하위 배열인 "EmployeeID": 6,7和9가 포함되어 있습니다.

Ajax 호출을 통해 위의 배열(위에 표시되지 않음)을 모두 얻었고 위 형식의 데이터를 생성하는 방식으로 이를 결합할 수 있는지 궁금했습니다. 헷갈리는 점은 위 형식과 같이 children: 를 추가하는 방법입니다.

Answer 1

여기서 다음 논리를 시도해 볼 수 있습니다.
다음과 같이 중첩된 구조로 데이터를 전달할 수 있습니다.
data->childrenArray->data->childrenArray 등. MakeNestedInLinear(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));