合并来自 2 个 api 的嵌套数据

Question

我有 2 个 API：

1. 有银行详细信息
2. 其他有用户帐户详细信息的人。

用户可以在 1 个银行拥有多个帐户。我必须从银行 api 获取银行名称和标志，并显示所有用户帐户的名称、金额银行名称和标志。

两个api数据如下：

银行 API：

[
    {
      "id": 2,
      "name": "KlikBCA",
      "bank_code": "KlikBCA",
      "country_code": "ID",
      "country_name": "India",
      "logo": "url",
      "createdAt": null,
      "updatedAt": "2021-07-26T14:58:03.000+00:00",
      "channels": null
    },
    {
      "id": 7,
      "name": "BNI Internet Banking",
      "bank_code": "BNI Internet Banking",
      "country_code": "ID",
      "country_name": "Indis",
      "primary_color": "url",
      "logo": null,
      "createdAt": null,
      "updatedAt": "2021-07-26T14:58:03.000+00:00",
      "channels": null
    }
]

用户 API：

[
  {
    "id": "sdf",
    "bankId": "7",
    "data": [
      {
        "accountId": “1234”,
        "accountHolder": "John Doe",
        "accountNumber": "587-2673-989",
        "balances": {
          "available": 500000,
        }
      },
      {
         "accountId": “2345”,
        "accountHolder": "John Doe",
        "accountNumber": "987-0675-789",
        "balances": {
          "available": 7500000
        }
      }
    ]
  },
  {
    "id": "f230",
    "bankId": "3",
    "data": [
      {
        "accountId": "9876",
        "accountHolder": "Charls",
        "accountNumber": "765-6543-345",
        "balances": {
          "available": 200000
        }
      }
    ]
  }
]

我需要这样的数据..以便我可以在我的下一个组件中使用它，该组件将获取每个帐户的所有银行详细信息。

[
    {
    "id": "sdf",
    "bankId": "7",
    "data": 
        {
        "accountId": “1234”,
        "accountHolder": "John Doe",
        "accountNumber": "587-2673-989",
        "balances": {
            "available": 500000,
        }
        },
    "bank":{
        "id": 7,
        "name": "BNI Internet Banking",
        "bank_code": "BNI Internet Banking",
        "country_code": "ID",
        "country_name": "Indis",
        "primary_color": "url",
        "logo": null,
        "createdAt": null,
        "updatedAt": "2021-07-26T14:58:03.000+00:00",
        "channels": null
        }
    },
    
    {"id": "sdf",
    "bankId": "7",
    "data": {
        "accountId": “2345”,
        "accountHolder": "John Doe",
        "accountNumber": "987-0675-789",
        "balances": {
        "available": 7500000
        }
    },
    "bank":{
        "id": 7,
        "name": "BNI Internet Banking",
        "bank_code": "BNI Internet Banking",
        "country_code": "ID",
        "country_name": "Indis",
        "primary_color": "url",
        "logo": null,
        "createdAt": null,
        "updatedAt": "2021-07-26T14:58:03.000+00:00",
        "channels": null
        }
    },
    {
    "id": "f230",
    "bankId": "3",
    "data": {
        "accountId": "9876",
        "accountHolder": "Charls",
        "accountNumber": "765-6543-345",
        "balances": {
            "available": 200000
        },
        "bank":{
            "name": "Mandiri",
            "bank_code": "Mandiri",
            "country_code": "ID",
            "country_name": "India",
            "primary_color": "url",
            "logo": null,
            "createdAt": null,
            "updatedAt": "2021-07-26T14:58:03.000+00:00",
            "channels": null
            }
        }
    }
]

Answer 1

您可以使用循环将两个api json合并为一个， 这是我的代码。 希望能帮到你。

const banks = [{
    "id": 2,
    "name": "KlikBCA",
    "bank_code": "KlikBCA",
    "country_code": "ID",
    "country_name": "India",
    "logo": "url",
    "createdAt": null,
    "updatedAt": "2021-07-26T14:58:03.000+00:00",
    "channels": null
}, {
    "id": 3,
    "name": "Mandiri",
    "bank_code": "Mandiri",
    "country_code": "ID",
    "country_name": "India",
    "primary_color": "url",
    "logo": null,
    "createdAt": null,
    "updatedAt": "2021-07-26T14:58:03.000+00:00",
    "channels": null
}, {
    "id": 7,
    "name": "BNI Internet Banking",
    "bank_code": "BNI Internet Banking",
    "country_code": "ID",
    "country_name": "Indis",
    "primary_color": "url",
    "logo": null,
    "createdAt": null,
    "updatedAt": "2021-07-26T14:58:03.000+00:00",
    "channels": null
}]


const users = [{
    "id": "sdf",
    "bankId": "7",
    "data": [{
        "accountId": "1234",
        "accountHolder": "John Doe",
        "accountNumber": "587-2673-989",
        "balances": {
            "available": 500000,
        }
    }, {
        "accountId": "2345",
        "accountHolder": "John Doe",
        "accountNumber": "987-0675-789",
        "balances": {
            "available": 7500000
        }
    }]
}, {
    "id": "f230",
    "bankId": "3",
    "data": [{
        "accountId": "9876",
        "accountHolder": "Charls",
        "accountNumber": "765-6543-345",
        "balances": {
            "available": 200000
        }
    }]
}]

let resultApi = users.map(u => {
    const t = banks.find(b => b.id == u.bankId) || {}
    return {
        ...u,
        ...t
    }
})

console.log(resultApi);

Answer 2

首先，作为一个反馈，您应该在代码块中编写 json 以提高可读性。 您的问题似乎不完整，因为您想要实现的目标？你想在 UI (html) 中显示这些数据还是创建一个新的 json？你尝试了多远？

尝试分享一个代码框/codepen 链接。

请记住，您需要遍历这两个数组并首先通过匹配user.bankId === bank.id 将银行数据存储在用户帐户中，然后使用新数据集您可以在任何您想要的地方显示它。先试一试，如果无法实现，请在 cmets 中告诉我们。