使用Angular 2(和Ionic 2),我需要将不同的数组组合成一种主列表,以使前端易于正确显示和处理所有数据。

换句话说,将正确的ID记录推送到具有Departments和Custom_fields中的名称或值的新Users数组中。将要合并的两个阵列将由用户自定义,而不是标准化的。

初始服务器响应



{
   "departments":[
      {
         "id":0,
         "name":"Staff"
      },
      {
         "id":1,
         "name":"Sales"
      },
      {
         "id":2,
         "name":"Development"
      }
   ],
   "custom_fields":[
      {
         "id":1,
         "name":"Company"
      },
      {
         "id":2,
         "name":"Job"
      }
   ],
   "users":[
      {
         "id":1,
         "email":"email@domain.com",
         "fname":"User",
         "lname":"One",
         "department":2,
         "custom_fields":[
            {
               "id":1,
               "value":"ABC Company"
            },
            {
               "id":2,
               "value":"Designer"
            }
         ]
      },
      {
         "id":2,
         "email":"email2@domain.com",
         "fname":"User",
         "lname":"Two",
         "department":3,
         "custom_fields":[
            {
               "id":1,
               "value":"ABC Company"
            },
            {
               "id":2,
               "value":"President"
            }
         ]
      }
   ]
}





潜在的客户端示例

请注意已添加的department_name和custom_fields.name。



   "users":[
      {
         "id":1,
         "email":"email@domain.com",
         "fname":"User",
         "lname":"One",
         "department":2,
         "department_name":"Development",
         "custom_fields":[
            {
               "id":1,
               "name":"Company",
               "value":"ABC Company"
            },
            {
               "id":2,
               "name":"Job",
               "value":"Designer"
            }
         ]
      },
      {
         "id":2,
         "email":"email2@domain.com",
         "fname":"User",
         "lname":"Two",
         "department":3,
         "custom_fields":[
            {
               "id":1,
               "name":"Company",
               "value":"ABC Company"
            },
            {
               "id":2,
               "name":"Company",
               "value":"President"
            }
         ]
      }
   ]
}





我正在使用Ionic 3.0.1和Angular 4.0.0通过websocket连接。服务器响应是一成不变的,但是我完全愿意接受客户端上的任何解决方案。

这些记录是分开的,因此任何更新都可以通过服务器的非常小的广播来完成,但是因此增加了客户端的工作量。

最佳答案

您可以将Array#mapArray#find结合使用来构建数据



var json = {
       "departments":[
          {
             "id":0,
             "name":"Staff"
          },
          {
             "id":1,
             "name":"Sales"
          },
          {
             "id":2,
             "name":"Development"
          }
       ],
       "custom_fields":[
          {
             "id":1,
             "name":"Company"
          },
          {
             "id":2,
             "name":"Job"
          }
       ],
       "users":[
          {
             "id":1,
             "email":"email@domain.com",
             "fname":"User",
             "lname":"One",
             "department":2,
             "custom_fields":[
                {
                   "id":1,
                   "value":"ABC Company"
                },
                {
                   "id":2,
                   "value":"Designer"
                }
             ]
          },
          {
             "id":2,
             "email":"email2@domain.com",
             "fname":"User",
             "lname":"Two",
             "department":3,
             "custom_fields":[
                {
                   "id":1,
                   "value":"ABC Company"
                },
                {
                   "id":2,
                   "value":"President"
                }
             ]
          }
       ]
    };

    var users = json.users;
    users.map(user => {
      var departmentName = json.departments.find(d => d.id == user.department);

      if (departmentName) {
       user.department_name = departmentName.name;
      }

       //Asume that custom_fields array are sorted by Id
       user.custom_fields = user.custom_fields.map((custom, idx) => {

          if (custom.id == json.custom_fields[idx].id) {
            custom.name = json.custom_fields[idx].name;
          }

          return custom;
       });
      return user;
    })

    console.log(users);

09-10 11:46
查看更多