角度2匹配/合并/推送和更新Json

时间:2017-05-10 02:18:44

标签: javascript json angular ionic2

使用Angular 2(和Ionic 2),我需要将不同的数组组合成一种主列表,以便前端可以很容易地正确显示和操作所有数据。

换句话说,将正确的ID'd记录推送到具有来自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。服务器响应相当一致,但我对客户端的任何解决方案都持开放态度。

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

2 个答案:

答案 0 :(得分:2)

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



public class Details extends AppCompatActivity {

    TextView title, time, details;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_details);

        title = (TextView) findViewById(R.id.mytitle);
        time = (TextView) findViewById(R.id.mytime);
        details = (TextView) findViewById(R.id.mydetail);

        String _title = getIntent().getStringExtra("MyTitle");
        String _news = getIntent().getStringExtra("MyNews");
        String _time = getIntent().getStringExtra("MyTime");

        title.setText(_title);
        time.setText(_time+"\n\n");
        details.setText(_news);


    }
}




答案 1 :(得分:0)

你看过/你能使用Underscore.js吗?

如果是这样,那么我会使用extend函数:

  

extend_.extend(destination,* sources)复制所有属性   源对象到目标对象,并返回   目标对象。它是有序的,所以最后一个来源会覆盖   以前参数中同名的属性。

_.extend({name: 'moe'}, {age: 50});
=> {name: 'moe', age: 50}

在您的情况下,如果第一个JSON块存储在arrayOne中,而第二个JSON块存储在arrayTwo中,那么您可以执行类似这样的操作(假设更改的数据始终在arrayOne.users中,并且第二个数组始终只是嵌套的用户对象。

  public arrayMerge = _.extend(this.arrayOne.users, this.arrayTwo);

我刚做了一个快速测试,看起来它合并得很好,但是有一点额外的弹片,我不确定是否要做一些重叠您的数据或我在测试夹具接线时所做的事情。

如果Underscore.js是一个选项,这可能会做你需要的。 (我在Angular2项目中使用它,所以如果你在集成它时遇到任何问题请告诉我。)