如何构造从一个数组获取数据

时间:2018-12-21 09:49:24

标签: angularjs-directive angular6

我的api结果以这种方式显示。在我看来,我有一个包含许多表单组字段的表单部分-如横幅,徽标,菜单,页脚。因此,如何访问仅用于横幅的横幅部分数据和仅用于徽标的徽标部分数据。

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
    0: {id: "49ad6f11-d647-4947-b221-019322fe3f08", settingName: "Achievements", settingValue: null, dataType: "string", useFor: "Menu", …}
    1: {id: "ed54f6e9-cd0c-47cf-b8f7-2f58bc65dcf5", settingName: "Footer", settingValue: null, dataType: "string", useFor: "Footer", …}
    2: {id: "c6dc0c94-ae79-4150-b5ff-3efaf216dc56", settingName: "Logo", settingValue: null, dataType: "file", useFor: "Logo", …}
    3: {id: "3a2f41eb-cf20-42a5-bdbd-593e38dc05f3", settingName: "Title", settingValue: null, dataType: "string", useFor: "Title", …}
    4: {id: "87025725-b286-4013-b2de-6ee4c76b3393", settingName: "Banner Title", settingValue: null, dataType: "string", useFor: "Banner", …}
    5: {id: "c079bd1c-d098-41da-9cd4-7bb7f6bdf131", settingName: "Banner Image", settingValue: null, dataType: "file", useFor: "Banner", …}
    6: {id: "388d4d2b-e0bb-4e6a-8d61-ca6286e4f13c", settingName: "Banner Sub Title", settingValue: null, dataType: "string", useFor: "Banner", …}
    7: {id: "7a8098b3-2a79-4b84-afde-e5ec105098de", settingName: "Store", settingValue: null, dataType: "string", useFor: "Menu", …}
    8: {id: "e1efd155-867b-43be-8c82-ebcf48c0d3a0", settingName: "About", settingValue: null, dataType: "string", useFor: "Menu", …}
    9: {id: "6896130f-2d9d-43c7-9c8e-ecb24395cb04", settingName: "?", settingValue: null, dataType: "string", useFor: "Menu", …}


  [1]: https://i.stack.imgur.com/hLqPv.png

1 个答案:

答案 0 :(得分:0)

您需要以能够保留UI结构的方式定义模型。

在这种情况下,我认为您可以根据useFor对响应进行分组,以对类似的分类对象进行分组。

例如

{group key: group objects}

对于UI,您可以具有动态componenet,它将具有两个输入:

  1. 组密钥,即useFor的值
  2. 组对象,即设置对象列表。

根据dataType的值,您将在UI上呈现不同的组件。

基于Regardin形式的实现。您可以使用相同的数据结构来创建“反应性表单”模块,其中每个带有验证的键的“ id”将具有唯一的名称。 在用户界面上,您将使用相同的键进行绑定。