如何筛选嵌套对象并保留原对象结构返回匹配结果

问题背景 #

需要筛选嵌套对象类型的数据，保留原对象的键值结构，仅保留符合搜索条件的项。当前代码返回匹配项组成的数组，不符合需求。

原始数据与搜索条件 #

const searchProduct = "aguas";

const unfilteredCurrentTemplates = {
  Aguascalientes: {
    productTemplate: {
      id: 351,
      created_at: "2019-03-05 22:29:49",
      updated_at: "2019-03-05 22:29:49",
      name: "Aguascalientes License Plate Hat",
      template: "prt_Aguascalientes.ai",
      fonts: null,
      custom_text: null,
      r: "0",
      g: "0",
      b: "0",
      top: "44",
      spacing: "68",
      relationId: null,
      aWidth: null,
      aHeight: null,
      productGroup: "20",
      shopifyId: "9935005454",
    },
    colorVariants: false,
  },
  Alabama: {
    productTemplate: {
      id: 1013,
      created_at: "2019-02-12 00:19:56",
      updated_at: "2019-02-12 00:19:56",
      name: "Alabama Plate Hat",
      template: "prt_Alabama.ai",
      fonts: "1",
      custom_text: "2",
      r: "0",
      g: "0",
      b: "0",
      top: "40",
      spacing: "77",
      relationId: null,
      aWidth: null,
      aHeight: null,
      productGroup: "20",
      shopifyId: "1307208155204",
    },
    colorVariants: false,
  },
  Alaska: {
    productTemplate: {
      id: 383,
      created_at: "2019-03-19 22:00:26",
      updated_at: "2019-03-19 22:00:26",
      name: "Alaska Plate Hat",
      template: "prt_Alaska.ai",
      fonts: "1",
      custom_text: "2",
      r: "42",
      g: "41",
      b: "95",
      top: "53",
      spacing: "73",
      relationId: null,
      aWidth: null,
      aHeight: null,
      productGroup: "20",
      shopifyId: "1927328399448",
    },
    colorVariants: false,
  },
  "Arizona 2018": {
    productTemplate: {
      id: 384,
      created_at: "2019-03-19 22:00:26",
      updated_at: "2019-03-19 22:00:26",
      name: "Arizona 2018 Plate Hat",
      template: "prt_Arizona-other.ai",
      fonts: "1",
      custom_text: "2",
      r: "30",
      g: "72",
      b: "69",
      top: "34",
      spacing: "81",
      relationId: null,
      aWidth: null,
      aHeight: null,
      productGroup: "20",
      shopifyId: "1337703858264",
    },
    colorVariants: false,
  },
  Arizona: {
    productTemplate: {
      id: 304,
      created_at: "2019-02-12 00:19:56",
      updated_at: "2019-02-12 00:19:56",
      name: "Arizona Plate Hat",
      template: "prt_Arizona.ai",
      fonts: "1",
      custom_text: "2",
      r: "0",
      g: "0",
      b: "0",
      top: "40",
      spacing: "79",
      relationId: null,
      aWidth: null,
      aHeight: null,
      productGroup: "20",
      shopifyId: "9503320398",
    },
    colorVariants: false,
  },
};

尝试的代码 #

const filter = Object.keys(unfilteredCurrentTemplates)
  .filter((item) => item.toLowerCase().startsWith(searchProduct.toLowerCase()))
  .map((obj) => unfilteredCurrentTemplates[obj]);

console.log(filter);

当前返回结果（数组形式） #

[
  {
    "productTemplate": {
      "id": 351,
      "created_at": "2019-03-05 22:29:49",
      "updated_at": "2019-03-05 22:29:49",
      "name": "Aguascalientes License Plate Hat",
      "template": "prt_Aguascalientes.ai",
      "fonts": null,
      "custom_text": null,
      "r": "0",
      "g": "0",
      "b": "0",
      "top": "44",
      "spacing": "68",
      "relationId": null,
      "aWidth": null,
      "aHeight": null,
      "productGroup": "20",
      "shopifyId": "9935005454"
    },
    "colorVariants": false
  }
]

需求 #

保留与unfilteredCurrentTemplates一致的对象键值结构，仅保留符合搜索条件的项。

解决方案 #

方法1：使用reduce构建新对象 #

const filteredTemplates = Object.keys(unfilteredCurrentTemplates)
  .filter(key => key.toLowerCase().startsWith(searchProduct.toLowerCase()))
  .reduce((acc, key) => {
    acc[key] = unfilteredCurrentTemplates[key];
    return acc;
  }, {});

console.log(filteredTemplates);

方法2：使用Object.fromEntries（更简洁） #

const filteredTemplates = Object.fromEntries(
  Object.entries(unfilteredCurrentTemplates)
    .filter(([key]) => key.toLowerCase().startsWith(searchProduct.toLowerCase()))
);

console.log(filteredTemplates);

最终返回结果 #

{
  "Aguascalientes": {
    "productTemplate": {
      "id": 351,
      "created_at": "2019-03-05 22:29:49",
      "updated_at": "2019-03-05 22:29:49",
      "name": "Aguascalientes License Plate Hat",
      "template": "prt_Aguascalientes.ai",
      "fonts": null,
      "custom_text": null,
      "r": "0",
      "g": "0",
      "b": "0",
      "top": "44",
      "spacing": "68",
      relationId: null,
      "aWidth": null,
      "aHeight": null,
      "productGroup": "20",
      "shopifyId": "9935005454"
    },
    "colorVariants": false
  }
}

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