如果projectId匹配子項和projectId分組，則資料轉換

我需要將所有 projectId 組合在一起，如果 projectId 相同，則孩子應該在當前專案中。請參閱下圖了解預期的最終結果。

感謝是否有人可以幫助我！我正在嘗試在構建應用程式功能的同時隨時隨地學習。謝謝你。

當前的 Json 格式：

[
  {
    "projectIds": "1aa",
    "children": [
      {
        "email": "[email protected]",
        "permissionIds": null,
        "roleIds": [
          "raa",
          "baa",
          "caa"
        ],
        "projectIds": "1aa"
      }
    ]
  },
  {
    "projectIds": "3aa",
    "children": [
      {
        "email": "[email protected]",
        "permissionIds": null,
        "roleIds": [
          "raa",
          "baa",
          "caa"
        ],
        "projectIds": "3aa"
      }
    ]
  },
  {
    "projectIds": "1aa",
    "children": [
      {
        "email": "[email protected]",
        "permissionIds": null,
        "roleIds": [
          "baa",
          "caa"
        ],
        "projectIds": "1aa"
      }
    ]
  },
  {
    "projectIds": "2aa",
    "children": [
      {
        "email": "[email protected]",
        "permissionIds": null,
        "roleIds": [
          "baa",
          "caa"
        ],
        "projectIds": "2aa"
      }
    ]
  },
  {
    "projectIds": "3aa",
    "children": [
      {
        "email": "[email protected]",
        "permissionIds": null,
        "roleIds": [
          "baa",
          "caa"
        ],
        "projectIds": "3aa"
      }
    ]
  },
  {
    "projectIds": "1aa",
    "children": [
      {
        "email": "[email protected]",
        "permissionIds": null,
        "roleIds": [
          "caa"
        ],
        "projectIds": "1aa"
      }
    ]
  }
]

預期的 Json 格式：

const data = [
  {
    projectIds: "1aa",
    children: [
      {
        email: "[email protected]",
        permissionIds: null,
        roleIds: ["raa","baa","caa"],
        projectIds: "1aa",
      },
      {
        email: "[email protected]",
        permissionIds: null,
        roleIds: ["baa","caa"],
        projectIds: "1aa",
      },
      {
        email: "[email protected]",
        permissionIds: null,
        roleIds: ["caa"],
        projectIds: "1aa",
      }
    ]
  },
  {
    projectIds: "2aa",
    children: [
      {
        email: "[email protected]",
        permissionIds: null,
        roleIds: ["baa","caa"],
        projectIds: "2aa",
      }
    ]
  },
  {
    projectIds: "3aa",
    children: [
      {
        email: "[email protected]",
        permissionIds: null,
        roleIds: ["raa","baa","caa"],
        projectIds: "3aa",
      },    
      {
        email: "[email protected]",
        permissionIds: null,
        roleIds: ["baa","caa"],
        projectIds: "3aa",
      }
    ]
  }
];

uj5u.com熱心網友回復：

你可以使用陣列減少和陣列查找，

const data = [
  {
    "projectIds": "1aa",
    "children": [
      {
        "email": "[email protected]",
        "permissionIds": null,
        "roleIds": [
          "raa",
          "baa",
          "caa"
        ],
        "projectIds": "1aa"
      }
    ]
  },
  {
    "projectIds": "3aa",
    "children": [
      {
        "email": "[email protected]",
        "permissionIds": null,
        "roleIds": [
          "raa",
          "baa",
          "caa"
        ],
        "projectIds": "3aa"
      }
    ]
  },
  {
    "projectIds": "1aa",
    "children": [
      {
        "email": "[email protected]",
        "permissionIds": null,
        "roleIds": [
          "baa",
          "caa"
        ],
        "projectIds": "1aa"
      }
    ]
  },
  {
    "projectIds": "2aa",
    "children": [
      {
        "email": "[email protected]",
        "permissionIds": null,
        "roleIds": [
          "baa",
          "caa"
        ],
        "projectIds": "2aa"
      }
    ]
  },
  {
    "projectIds": "3aa",
    "children": [
      {
        "email": "[email protected]",
        "permissionIds": null,
        "roleIds": [
          "baa",
          "caa"
        ],
        "projectIds": "3aa"
      }
    ]
  },
  {
    "projectIds": "1aa",
    "children": [
      {
        "email": "[email protected]",
        "permissionIds": null,
        "roleIds": [
          "caa"
        ],
        "projectIds": "1aa"
      }
    ]
  }
]

const findMatch = (arr, projectIds) => arr.find(item => item.projectIds === projectIds)

const grouppingArray = (originalArr) => {
  return Array.isArray(originalArr) ? originalArr.reduce((previousObj, obj) => {
    if (findMatch(previousObj, obj.projectIds)) {
      findMatch(previousObj, obj.projectIds).children.push(...obj.children)
    } else {
      previousObj.push(obj)
    }
    return previousObj
  }, []) : 'Need an array'
}

console.log(grouppingArray(data))

uj5u.com熱心網友回復：

您可以嘗試 array.reduce() 其中 initialData 是您當前的資料

const data = initialData.reduce(function (r, a) {
        r[a.projectIds] = r[a.projectIds] || [];
        r[a.projectIds].push(a);
        return r;
    }, Object.create(null));

標籤：javascript json 数据转换

上一篇：根據布爾狀態渲染具有不同樣式的組件

下一篇：如何在顫動中禁用頁面視圖的滑動操作