重寫後的標題為:將三個數組合併為類似樹形結構的數據
P粉203792468
P粉203792468 2023-09-06 19:44:37
0
1
438

如果我有以下數據如下:

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);

對於每個父級的children屬性,我有單獨的Ajax調用,它們會傳回一個陣列。是否可能將這三個陣列組合起來,產生一個如fiddle中所示的陣列?

以上資料的原始來源是這裡,這是從這裡取得的

我想要的更多解釋:

我手邊有3個陣列。

  1. 一個陣列中包含"EmployeeID": 2,的資料。
  2. 第二個陣列包含"EmployeeID": 8,1,3,4和5,是第一個陣列的子項目。
  3. 第三個陣列包含"EmployeeID": 6,7和9,是第二個陣列的子項。

我透過Ajax呼叫取得了以上所有陣列(未在上面顯示),想知道是否可以以這種方式組合它們,以產生上述格式的資料。 讓我困惑的是如何像上面的格式中那樣添加children:

P粉203792468
P粉203792468

全部回覆(1)
P粉276577460

在這裡你可以嘗試這個邏輯:
我們可以傳遞具有嵌套結構的數據,例如:
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));
##
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!