时间戳

首页 > 解决方案 > 合并来自 2 个 api 的嵌套数据

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

问题描述

我有2个api：

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

用户可以在 1 家银行拥有超过 1 个账户。我必须从银行 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
    }
]

用户接口：

[
  {
    "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
            }
        }
    }
]

标签： javascriptlodash

解决方案

您可以使用循环将两个 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);

推荐阅读