如何将json对象的单独列表合并为一个对象数组?

时间:2018-10-23 05:51:51

标签: json angular mapping

我正在以这种形式从数据库中获取数据。

有一个对象数组,每个对象看起来像这样。

  },
  {
    "vehicleId": 2287,
    "plateNumber": "GGS-733",
    "vehicleTypeId": 1,
    "driverId": null,
    "garageId": 1,
    "statusId": 0,
    "vehicleModelId": 18,
    "additionalInfo": null,
    "techInspectDate": "00:00:00",
    "person": null
  },
  {

我也分别获得了此处包含的对象列表。 (车库ID,状态ID,车辆类型ID)。它们每个都有不同的值(例如vehicleType)。我想将它们正确映射到新对象,而不是Ids将具有这些对象的值。

我希望最终结果是一个看起来像这样的对象。

  },
  {
    "vehicleId": 2287,
    "plateNumber": "GGS-733",
    --> "vehicleType": "SUV",
    --> "driver": "John Smith",
    --> "garage": "Boston",
    --> "statusId": "available",
    "vehicleModelId": 18,
    "additionalInfo": null,
    "techInspectDate": "00:00:00",
    "person": null
  },
  { 

我面临几个问题。我需要等待所有列表首先被完全提取,直到尝试将所有内容映射到新对象。我需要使异步事件的顺序正确。而且我不能将列表放在单独的对象中,并在需要时访问它。我的最终结果需要是一个对象,就像之前指定的一样,我需要将其提供给一个函数,该函数稍后将在前端显示其值。

当前,我正在获取车库和其他类似对象的列表。

  public getGarages(): Observable<any[]> {
    const url = `${this.serviceUrl}lists/garages`;
    return this.http.get<any[]>(url);
  }

早期的数据库给了我整棵树。这意味着车辆包括整个车库对象,而不仅仅是车库对象。因此,我让getVehicles函数对其每个对象进行映射,获取子级值并将其复制到对象中的新值中。但现在我只有ID。

getVehicles(): Observable<Vehicle[]> {
     const url = `${this.serviceUrl}`;
     return this.http.get<Vehicle[]>(url).pipe(
      tap(vehiclesArray => vehiclesArray.forEach(element => {

      //  element.garageName = element.garage.garageName;
      //  element.status = element.vehicleStatus.status;
      //  element.vtype = element.vehicleType.vehicleType;
      //  element.ownerName = element.owner.ownerName;
      //  element.vehicleModelName = element.vehicleModel.vehicleModelName;
      })));
  }

我的想法之一是做一个计数器,检查所有订阅是否都已完成,以便在主要车辆功能中,我知道我已经准备好所有数据。

我想到的另一个想法是让一个函数调用另一个函数,直到我进入车辆的主要功能为止,但这可能会减慢该过程,因为这些调用将依次发生而不是同时发生。

如何获得最终结果? 什么是有效且正确的方法?

1 个答案:

答案 0 :(得分:0)

我意识到最好先调用它并获取数据,然后再编辑对象,而不是最后调用Vehicles函数。我编写了从html响应获取JSON列表的函数。得到列表后,我遍历该列表,遍历我的车辆对象,并在ID匹配的情况下复制了值。

这是我的getVehicles代码

getVehicles() {
    this.fleetService.getVehicles()
    .subscribe(value => {
      this.vehicles = value;
      this.getGarages();
      this.getVehicleTypes();
      this.getVehicleModels();
      this.dataSource = new MatTableDataSource(this.vehicles);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    });
  }

在车辆中,我将getGarages和其他函数称为subscription,以便为函数编辑数据做好准备。

所有功能都相同:

getGarages(): void {
    this.fleetService.getGarages().subscribe(result => {
      this.garages = result;
      this.vehicles.forEach(function (element) {
        this.garages.forEach(garage => {
          if (garage.garageId === element.garageId) {
            element.garageName = garage.garageName;
          }
        });
      }.bind(this));
    });
  }

我在解决方案中发现的唯一问题是,我每次都在遍历车辆对象。而不是循环一次并添加所有值。如果有人有更好的主意,请分享。