如何在反應js中合並兩個json響應

Question

我有兩個 api json 響應為

"aws": [
    {
      "id": "i-0b3db6cb7bebde704",
      "cloudProvider": "aws",
      "type": "t2.micro",
      "placement": {
        "region": "ap-southeast-1",
        "availabilityZone": "ap-southeast-1a"
      },
      "os": {
        "ImageId": "ami-0801a1e12f4a9ccc0",
        "platform": "Linux/UNIX",
        "name": "amzn2-ami-kernel-5.10-hvm-2.0.20220316.0-x86_64-gp2",
        "description": "Amazon Linux 2 Kernel 5.10 AMI 2.0.20220316.0 x86_64 HVM gp2",
        "hypervisor": "xen",
        "architecture": "x86_64"
      }
    }
  ]

另一個是

 "azure": [
    {
      "id": "crawler-rnd",
      "cloudProvider": "azure",
      "name": "crawler-rnd",
      "type": "Standard_E4s_v3",
      "placement": {
        "region": "centralus",
        "resourceGroup": "CRAWLER-RND"
      },
      "os": {
        "platform": "MicrosoftWindowsDesktop",
        "name": "Windows-10"
      }
    }
  ]

我正在使用 React，Redux。 我嘗試合並兩個 Json 對象，兩個響應具有相同的屬性名稱，我嘗試了幾種方法，例如擴展運算符 Object.assign() 但在這種情況下，第一個被第二個覆蓋，預期結果如下：

"aws": [
    {
      "id": "i-0b3db6cb7bebde704",
      "cloudProvider": "aws",
      "type": "t2.micro",
      "placement": {
        "region": "ap-southeast-1",
        "availabilityZone": "ap-southeast-1a"
      },
      "os": {
        "ImageId": "ami-0801a1e12f4a9ccc0",
        "platform": "Linux/UNIX",
        "name": "amzn2-ami-kernel-5.10-hvm-2.0.20220316.0-x86_64-gp2",
        "description": "Amazon Linux 2 Kernel 5.10 AMI 2.0.20220316.0 x86_64 HVM gp2",
        "hypervisor": "xen",
        "architecture": "x86_64"
      }
    },
{
      "id": "crawler-rnd",
      "cloudProvider": "azure",
      "name": "crawler-rnd",
      "type": "Standard_E4s_v3",
      "placement": {
        "region": "centralus",
        "resourceGroup": "CRAWLER-RND"
      },
      "os": {
        "platform": "MicrosoftWindowsDesktop",
        "name": "Windows-10"
      }
    },
    
  ]

Answer 1

您可以通過將兩個數組連接在一起來生成concat的結果數組：

var result = {
  'aws': response1.aws.concat(response2.azure)
};

Answer 2

嘗試這個

 let response1 = { "aws": [ { "id": "i-0b3db6cb7bebde704", "cloudProvider": "aws", "type": "t2.micro", "placement": { "region": "ap-southeast-1", "availabilityZone": "ap-southeast-1a" }, "os": { "ImageId": "ami-0801a1e12f4a9ccc0", "platform": "Linux/UNIX", "name": "amzn2-ami-kernel-5.10-hvm-2.0.20220316.0-x86_64-gp2", "description": "Amazon Linux 2 Kernel 5.10 AMI 2.0.20220316.0 x86_64 HVM gp2", "hypervisor": "xen", "architecture": "x86_64" } } ] }; let response2 = { "azure": [ { "id": "crawler-rnd", "cloudProvider": "azure", "name": "crawler-rnd", "type": "Standard_E4s_v3", "placement": { "region": "centralus", "resourceGroup": "CRAWLER-RND" }, "os": { "platform": "MicrosoftWindowsDesktop", "name": "Windows-10" } } ] }; let structuredResult = { 'aws': [ ...response1?.aws, ...response2?.azure ] }; console.log(structuredResult)