如何在Angular15中合并所有许可证号为单个数组

我正在使用Angular 15开发基于输入的自动补全搜索功能，接口返回的每个对象中LicenseNumber均为字符串数组。现需将所有对象中的许可证号收集合并为单个对象数组或字符串数组。

预期输出示例 #

LicenseInfo: ["1-W-1", "1-W-5", ..., "8-5133"]

当前TS代码 #

for (var item in results.hits) {
  let dataValue = {licenseNumber:''}
  dataValue.licenseNumber= results.hits[item]._source.LicenseNumber;
  data.push(dataValue);
}

接口返回JSON结构 #

{
  "hits": {
    "hits": [
      {
        "_source": {
          "ProfileName": "",
          "AddressLine1": [
            "7508 abc 105",
            "7400 def, Suite 200",
            "727 xyz",
            "8001 123",
            "1650 ngr"
          ],
          "AddressLine2": [
            "11333 East ",
            "2308 North ",
            "8831 East ",
            "204 dsj",
            "1517 HWY "
          ],
          "AddressLine3": [],
          "AddressLine4": [],
          "Zip": [
            "116-900",
            "749-01",
            "77-52",
            "179",
            "702",
            "746",
            "7402",
            "74-5801",
            "741",
            "7342"
          ],
          "City": [
            "OKLAHOMA CITY",
            "Oklahoma City",
            "OKLAHOMA CITY",
            "OKLAHOMA CITY",
            "Broken Arrow",
            "Tulsa",
            "BROKEN ARROW",
            "TULSA",
            "PRYOR",
            "GUYMON"
          ],
          "State": "OK",
          "LicenseType": "Wholesale Distributor",
          "BusinessModel": "Wholesaler",
          "LicenseNumber": [
            "1-W-1",
            "1-W-5",
            "1-W-6",
            "1-W-82",
            "2-W-12",
            "2-W-45",
            "2-W-416",
            "2-W-91",
            "30-W-21",
            "43-W-95"
          ]
        }
      },
      {
        "_source": {
          "ProfileName": "HEALTHCARE ",
          "AddressLine1": [
            "110 Rsahasd"
          ],
          "AddressLine2": [
            "220 road"
          ],
          "AddressLine3": [],
          "AddressLine4": [],
          "Zip": [
            "73075"
          ],
          "City": [
            "PAULS VALLEY"
          ],
          "State": "OK",
          "LicenseType": "Retail",
          "BusinessModel": "Dispenser",
          "LicenseNumber": [
            "2-667"
          ]
        }
      },
      {
        "_index": "pulse",
        "_id": "19297",
        "_score": 5.054507,
        "_source": {
          "ProfileName": "PHARMACY",
          "AddressLine1": [
            "101 West MAIN",
            "101 East MAIN"
          ],
          "AddressLine2": [],
          "AddressLine3": [],
          "AddressLine4": [],
          "Zip": [
            "749",
            "739"
          ],
          "City": [
            "JOHN",
            "JON"
          ],
          "State": "OK",
          "LicenseType": "Retail",
          "BusinessModel": "Dispenser",
          "LicenseNumber": [
            "1-89",
            "1-39"
          ]
        }
      },
      {
        "_index": "pulse",
        "_id": "22739",
        "_score": 5.054507,
        "_source": {
          "ProfileName": "THE MEDICINE ",
          "AddressLine1": [
            "311 N WASHINGTON AVENUE",
            "311 N WASHINGTON AVENUE"
          ],
          "AddressLine2": [],
          "AddressLine3": [],
          "AddressLine4": [],
          "Zip": [
            "74701-3641",
            "74701-3641"
          ],
          "City": [
            "DURANT",
            "DURANT"
          ],
          "State": "OK",
          "LicenseType": "Retail",
          "BusinessModel": "Dispenser",
          "LicenseNumber": [
            "27-4393",
            "27-8581"
          ]
        }
      },
      {
        "_index": "pulse",
        "_id": "27256",
        "_score": 5.054507,
        "_source": {
          "ProfileName": "WAL-MART ",
          "AddressLine1": [
            "7520 East ",
            "772 North",
            "2705 West",
            "1018 N ",
            "3571 W ",
            "2551 CLASS",
            "13503 S ",
            "3651 CLASS",
            "3301 SW 104",
            "4545 W 6TH"
          ],
          "AddressLine2": [
            "6437 North",
            "14185 drive",
            "4900 Sooner",
            "2001 SST",
            "2019 EST",
            "10938 SDR",
            "12200 SWACO",
            "12912 E N",
            "3900 EHILLDR",
            "3139 SE"
          ],
          "AddressLine3": [],
          "AddressLine4": [],
          "Zip": [
            "63110",
            "63132",
            "63020",
            "63135",
            "63018",
            "64137",
            "64133",
            "64033",
            "64055",
            "64014"
          ],
          "City": [
            "MIDWEST CITY",
            "WARR ACRES",
            "CHOCTAW",
            "OKLAHOMA CITY",
            "CHICKASHA",
            "TULSA",
            "TULSA",
            "GLENPOOL",
            "OWASSO",
            "BROKEN ARROW"
          ],
          "State": "OK",
          "LicenseType": "Retail",
          "BusinessModel": "Dispenser",
          "LicenseNumber": [
            "1-5770",
            "1-6379",
            "1-6621",
            "1-6934",
            "18-5060",
            "2-3864",
            "2-5116",
            "2-5298",
            "2-5444",
            "2-5449",
            "2-6632",
            "26-6921",
            "2-6710",
            "2-7368",
            "2-7447",
            "29-3720",
            "30-6922",
            "34-4508",
            "35-5557",
            "3-6891",
            "46-5049",
            "52-5782",
            "55-5459",
            "5-6935",
            "7-6284",
            "7-6951",
            "7-7474",
            "7-7573",
            "7-7692",
            "8-5133"
          ]
        }
      }
    ]
  }
}

解决方案 #

1. 合并为纯字符串数组 #

使用flatMap可直接将嵌套数组展开为一维数组，写法简洁：

const licenseInfo: string[] = results.hits.hits.flatMap(hit => hit._source.LicenseNumber);

也可以用reduce实现相同效果：

const licenseInfo: string[] = results.hits.hits.reduce((acc, hit) => {
  acc.push(...hit._source.LicenseNumber);
  return acc;
}, [] as string[]);

2. 合并为对象数组（每个元素为含licenseNumber的对象） #

如果需要保持每个许可证号为单独的对象结构，可使用嵌套遍历或链式写法：

// 嵌套遍历写法
const data: { licenseNumber: string }[] = [];
results.hits.hits.forEach(hit => {
  hit._source.LicenseNumber.forEach(license => {
    data.push({ licenseNumber: license });
  });
});

// 链式写法
const data: { licenseNumber: string }[] = results.hits.hits.flatMap(hit => 
  hit._source.LicenseNumber.map(license => ({ licenseNumber: license }))
);

注：原代码的问题在于直接将整个LicenseNumber数组赋值给dataValue.licenseNumber，导致最终得到数组嵌套数组的结构，上述方案通过展开每个子数组，实现了预期的一维数组效果。

内容的提问来源于stack exchange，提问作者Bhrungarajni