Angular 4从用于级联下拉列表的硬编码数据切换到从web api调用获取复杂对象

时间：2017-09-22 08:17:27

标签： javascript json angular typescript angular-services

在一个带有.net核心和Angular 4的新项目中 - 我不得不等到真正的数据库到位。

现在有一个DBA，后端开发人员最终得到了一个web api，我需要调用并获取一个嵌套对象，其数据在数组中更简单。

当前数据通话

  

这是我调用方法来检索所有类别的地方

getCategory() {
    return [
        new Category(1, 1, 'VAMC-Cat-1'),
        new Category(2, 1, 'VAMC-Cat-2'),
        new Category(3, 1, 'VAMC-Cat-3'),
        new Category(4, 2, 'Vet-Cat-1'),
        new Category(5, 2, 'Vet-Cat-2'),
        new Category(6, 2, 'Vet-Cat-3'),
        new Category(7, 3, 'Provider-Cat-1'),
        new Category(8, 3, 'Provider-Cat-2'),
        new Category(9, 3, 'Provider-Cat-3'),
        new Category(10, 4, 'Other-Cat-1'),
        new Category(11, 4, 'Other-Cat-2'),
        new Category(12, 4, 'Other-Cat-3'),
        new Category(13, 5, 'None-Cat-1'),
        new Category(14, 5, 'None-Cat-3'),
        new Category(15, 5, 'None-Cat-2'),
    ];
}

如果向下滚动，您可以看到我对3个级联下拉列表的单个调用都在一个大的复杂对象中。如何调用我需要在Angular4 / typescript中保留的数据。 任何想法/示例？

将返回的新数据（swagger ui）我以前称之为web api 

[
  {
    "customerTypeId": 1,
    "customerTypeName": "VAMC",
    "childCategories": [
      {
        "categoryId": 1,
        "categoryName": "VAMC-Cat-1",
        "customerTypeID": 1,
        "childSubCategories": [
          {
            "subCategoryId": 1,
            "subCategoryName": "VAMC-SubCat-1-1",
            "categoryID": 1
          },
          {
            "subCategoryId": 2,
            "subCategoryName": "VAMC-SubCat-1-2",
            "categoryID": 1
          }
        ]
      },
      {
        "categoryId": 2,
        "categoryName": "VAMC-Cat-2",
        "customerTypeID": 1,
        "childSubCategories": [
          {
            "subCategoryId": 3,
            "subCategoryName": "VAMC-SubCat-2-1",
            "categoryID": 2
          },
          {
            "subCategoryId": 4,
            "subCategoryName": "VAMC-SubCat-2-2",
            "categoryID": 2
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 2,
    "customerTypeName": "Vet",
    "childCategories": [
      {
        "categoryId": 3,
        "categoryName": "Vet-Cat-1",
        "customerTypeID": 2,
        "childSubCategories": [
          {
            "subCategoryId": 5,
            "subCategoryName": "Vet-SubCat-1-1",
            "categoryID": 3
          },
          {
            "subCategoryId": 6,
            "subCategoryName": "Vet-SubCat-1-2",
            "categoryID": 3
          }
        ]
      },
      {
        "categoryId": 4,
        "categoryName": "Vet-Cat-2",
        "customerTypeID": 2,
        "childSubCategories": [
          {
            "subCategoryId": 7,
            "subCategoryName": "Vet-SubCat-2-1",
            "categoryID": 4
          },
          {
            "subCategoryId": 8,
            "subCategoryName": "Vet-SubCat-2-2",
            "categoryID": 4
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 3,
    "customerTypeName": "Provider",
    "childCategories": [
      {
        "categoryId": 5,
        "categoryName": "Provider-Cat-1",
        "customerTypeID": 3,
        "childSubCategories": [
          {
            "subCategoryId": 9,
            "subCategoryName": "Provider-SubCat-1-1",
            "categoryID": 5
          },
          {
            "subCategoryId": 10,
            "subCategoryName": "Provider-SubCat-1-2",
            "categoryID": 5
          }
        ]
      },
      {
        "categoryId": 6,
        "categoryName": "Provider-Cat-2",
        "customerTypeID": 3,
        "childSubCategories": [
          {
            "subCategoryId": 11,
            "subCategoryName": "Provider-SubCat-2-1",
            "categoryID": 6
          },
          {
            "subCategoryId": 12,
            "subCategoryName": "Provider-SubCat-2-2",
            "categoryID": 6
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 4,
    "customerTypeName": "Other",
    "childCategories": [
      {
        "categoryId": 7,
        "categoryName": "Other-Cat-1",
        "customerTypeID": 4,
        "childSubCategories": [
          {
            "subCategoryId": 13,
            "subCategoryName": "Other-SubCat-1-1",
            "categoryID": 7
          },
          {
            "subCategoryId": 14,
            "subCategoryName": "Other-SubCat-1-2",
            "categoryID": 7
          }
        ]
      },
      {
        "categoryId": 8,
        "categoryName": "Other-Cat-2",
        "customerTypeID": 4,
        "childSubCategories": [
          {
            "subCategoryId": 15,
            "subCategoryName": "Other-SubCat-2-1",
            "categoryID": 8
          },
          {
            "subCategoryId": 16,
            "subCategoryName": "Other-SubCat-2-2",
            "categoryID": 8
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 5,
    "customerTypeName": "None",
    "childCategories": [
      {
        "categoryId": 9,
        "categoryName": "None-Cat-1",
        "customerTypeID": 5,
        "childSubCategories": [
          {
            "subCategoryId": 17,
            "subCategoryName": "None-SubCat-1-1",
            "categoryID": 9
          },
          {
            "subCategoryId": 18,
            "subCategoryName": "None-SubCat-1-2",
            "categoryID": 9
          }
        ]
      },
      {
        "categoryId": 10,
        "categoryName": "None-Cat-2",
        "customerTypeID": 5,
        "childSubCategories": [
          {
            "subCategoryId": 19,
            "subCategoryName": "None-SubCat-2-1",
            "categoryID": 10
          },
          {
            "subCategoryId": 20,
            "subCategoryName": "None-SubCat-2-2",
            "categoryID": 10
          }
        ]
      }
    ]
  }
]

1 个答案:

答案 0 :(得分：0)

您可以根据需要以不同方式使用数组map()，reduce()。很高兴看到filter()。

此处也有destruction in parameters的用法。

在Angular 4中，我希望你已经有了这项服务，如果没有创建一个。从服务中，您可以调用API，转换结果，返回可以从组件中解析/订阅的Promise或Observer。

let result = data.map(item => item["childCategories"])
  .reduce((a, item) => a.concat(item), [])
  .map(({
    categoryId,
    categoryName,
    customerTypeID
  }) => ({
    categoryId,
    categoryName,
    customerTypeID
  }));

可以更改最后一张地图，让class位于其中：

  .map(({
    categoryId,
    categoryName,
    customerTypeID
  }) => new Category(
    categoryId,
    categoryName,
    customerTypeID
  ));


const data = [{
    "customerTypeId": 1,
    "customerTypeName": "VAMC",
    "childCategories": [{
        "categoryId": 1,
        "categoryName": "VAMC-Cat-1",
        "customerTypeID": 1,
        "childSubCategories": [{
            "subCategoryId": 1,
            "subCategoryName": "VAMC-SubCat-1-1",
            "categoryID": 1
          },
          {
            "subCategoryId": 2,
            "subCategoryName": "VAMC-SubCat-1-2",
            "categoryID": 1
          }
        ]
      },
      {
        "categoryId": 2,
        "categoryName": "VAMC-Cat-2",
        "customerTypeID": 1,
        "childSubCategories": [{
            "subCategoryId": 3,
            "subCategoryName": "VAMC-SubCat-2-1",
            "categoryID": 2
          },
          {
            "subCategoryId": 4,
            "subCategoryName": "VAMC-SubCat-2-2",
            "categoryID": 2
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 2,
    "customerTypeName": "Vet",
    "childCategories": [{
        "categoryId": 3,
        "categoryName": "Vet-Cat-1",
        "customerTypeID": 2,
        "childSubCategories": [{
            "subCategoryId": 5,
            "subCategoryName": "Vet-SubCat-1-1",
            "categoryID": 3
          },
          {
            "subCategoryId": 6,
            "subCategoryName": "Vet-SubCat-1-2",
            "categoryID": 3
          }
        ]
      },
      {
        "categoryId": 4,
        "categoryName": "Vet-Cat-2",
        "customerTypeID": 2,
        "childSubCategories": [{
            "subCategoryId": 7,
            "subCategoryName": "Vet-SubCat-2-1",
            "categoryID": 4
          },
          {
            "subCategoryId": 8,
            "subCategoryName": "Vet-SubCat-2-2",
            "categoryID": 4
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 3,
    "customerTypeName": "Provider",
    "childCategories": [{
        "categoryId": 5,
        "categoryName": "Provider-Cat-1",
        "customerTypeID": 3,
        "childSubCategories": [{
            "subCategoryId": 9,
            "subCategoryName": "Provider-SubCat-1-1",
            "categoryID": 5
          },
          {
            "subCategoryId": 10,
            "subCategoryName": "Provider-SubCat-1-2",
            "categoryID": 5
          }
        ]
      },
      {
        "categoryId": 6,
        "categoryName": "Provider-Cat-2",
        "customerTypeID": 3,
        "childSubCategories": [{
            "subCategoryId": 11,
            "subCategoryName": "Provider-SubCat-2-1",
            "categoryID": 6
          },
          {
            "subCategoryId": 12,
            "subCategoryName": "Provider-SubCat-2-2",
            "categoryID": 6
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 4,
    "customerTypeName": "Other",
    "childCategories": [{
        "categoryId": 7,
        "categoryName": "Other-Cat-1",
        "customerTypeID": 4,
        "childSubCategories": [{
            "subCategoryId": 13,
            "subCategoryName": "Other-SubCat-1-1",
            "categoryID": 7
          },
          {
            "subCategoryId": 14,
            "subCategoryName": "Other-SubCat-1-2",
            "categoryID": 7
          }
        ]
      },
      {
        "categoryId": 8,
        "categoryName": "Other-Cat-2",
        "customerTypeID": 4,
        "childSubCategories": [{
            "subCategoryId": 15,
            "subCategoryName": "Other-SubCat-2-1",
            "categoryID": 8
          },
          {
            "subCategoryId": 16,
            "subCategoryName": "Other-SubCat-2-2",
            "categoryID": 8
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 5,
    "customerTypeName": "None",
    "childCategories": [{
        "categoryId": 9,
        "categoryName": "None-Cat-1",
        "customerTypeID": 5,
        "childSubCategories": [{
            "subCategoryId": 17,
            "subCategoryName": "None-SubCat-1-1",
            "categoryID": 9
          },
          {
            "subCategoryId": 18,
            "subCategoryName": "None-SubCat-1-2",
            "categoryID": 9
          }
        ]
      },
      {
        "categoryId": 10,
        "categoryName": "None-Cat-2",
        "customerTypeID": 5,
        "childSubCategories": [{
            "subCategoryId": 19,
            "subCategoryName": "None-SubCat-2-1",
            "categoryID": 10
          },
          {
            "subCategoryId": 20,
            "subCategoryName": "None-SubCat-2-2",
            "categoryID": 10
          }
        ]
      }
    ]
  }
];
let result = data.map(item => item["childCategories"])
  .reduce((a, item) => a.concat(item), [])
  .map(({
    categoryId,
    categoryName,
    customerTypeID
  }) => ({
    categoryId,
    categoryName,
    customerTypeID
  }));
console.log(result);

相关问题
最新问题