UI 如何更好的根据 Metadata 来显示数据?

这里有一个开发场景，具体是这样的:

我负责一个使用 AngularJS 的项目，访问数据库全部都是通过另外一个同事写的 RESTful API(用 OData 写的). API 大致分为两种，一种是用来获取每个表的 Metadata(元数据, 就是定义每个实体表的结构)，另一种则是用来获取实体表的数据.

类似于下面这样:

API for Metadata: http://127.0.0.1/odata/TABS_METADATA?filter=TABLE_NAME eq 'TABLE_A' or TABLE_NAME eq 'TABLE_B'

API for Data: http://127.0.0.1/odata/TABLE_A(88)?expand=TABLE_B

因为 Metadata 里面有每个 Column 的定义信息，所以 UI 这边拿到 Metadata 后，可以根据 Metadata 来显示 Data ，例如 Column 的 Data Type 为 varchar ，在 UI 上就会显示成 Text Box ，如果 Data Type 为 time ，则会显示成 DateTime Picker.

这是 Boss 最初的想法，主要就是希望能够做到配置化，哪个 Column 是否需要显示或者显示成什么控件，由 Metadata 这张表来控制.

但是这样做有一些限制，

1. 首先 Add Mode 和 Edit Mode 需要的 Metadata 不一样， Add Mode 不需要显示 ID 列，但是在 Edit Mode 下，需要把 ID 列给显示出来. 不过这可以通过在 Metadata 表增加 Column 来控制.

2. Metadata 的 API 只能获取 Table 的 Metadata ，并不能知道 Table 的主外键关系， UI 显示的数据来自于多个 Table ，根据 Metadata 来显示 Data 的话，不知道 Table 的主外键关系. 所以我在实现功能的时候，是等 Metadata 和 Data 的 API 都成功返回数据之前，根据 Data 的 API 返回的 Object 数据，遍历这个 Object 的每个属性，如果这个属性是键值对，就到 Metadata 找对应的信息(这里也需要遍历一遍 Metadata)，如果这个属性仍然是一个 Object ，继续遍历. 也就是说，我的做法是从 Data 到 Metadata ，而不是 Boss 提倡的 Metadata 到 Data. 这种做法最大的硬伤就是，性能太差，如果数据结构复杂的话，遍历太多了.

3. 还有另外一个问题， UI 上显示数据的结构，跟数据本身在数据库里面的结构不一样. 例如有三个表， TABLE_A, TABLE_B, TABLE_C. 它们的结构如下:

{
  TABLE_A: {
    ATTR_A_1: 'VALUE',
    ATTR_A_2: 'VALUE',
    TABLE_B: {
      ATTR_B_1: 'VALUE',
      ATTR_B_2: 'VALUE',
      TABLE_C: {
        ATTR_C_1: 'VALUE',
        ATTR_C_2: 'VALUE'
      }
    }
  }
}

但是在 UI 上显示，是需要把三个 Table 的数据给展平的. 所以在 UI 这边需要有逻辑去展平数据，展平数据的逻辑可以说是一个特殊处理，因为并不是所有数据都需要展平. 目前想到可以这样去解决这个问题，就是除了 Metadata 那张表之外， UI 这边也会有一个专门的配置来处理数据. 大概的逻辑就是，优先使用 UI 这边的配置，如果 UI 这边的配置没有，就用 Metadata 的配置.

其实 UI 这边想要做到可以配置化比较复杂，太多东西要配置了. 不知道大家对于上面这些情况是如何处理的.

主要是想跟大家讨论一下，如果有什么地方看不明白可以问我，回答大家也有助于我把问题理得更加清楚.