如何將json對象數組綁定到ES6中的javascript類數組

Question

我正在研究連接到Reactjs上的一個安靜的Web服務的單頁面應用程序，我的問題與Reactjs無關，它只是一個應該在Javascript上正確實現的設計模式。

在項目的一部分，我向服務器發送GET請求並收回包含地址信息的Json響應。 以上是對我的要求的完整回復：

{
  "Result": "Done",
  "Errors": null,
  "Model": {
    "UserAddresses": [{
      "AddressId": 121,
      "AddressName": "",
      "AreaId": 1
    }, {
      "AddressId": 122,
      "AddressName": "",
      "AreaId": 1
    }, {
      "AddressId": 123,
      "AddressName": "",
      "AreaId": 1
    }, {
      "AddressId": 124,
      "AddressName": "",
      "AreaId": 1
    }],
    "AvailableAreas": [{
      "AreaId": 1,
      "AreaName": "داخل شهر",
      "Cost": 0
    }, {
      "AreaId": 2,
      "AreaName": "شهرک عباس آباد",
      "Cost": 5000
    }, {
      "AreaId": 3,
      "AreaName": "ویرمونی",
      "Cost": null
    }, {
      "AreaId": 6,
      "AreaName": "راه آهن",
      "Cost": null
    }]
  }
}

正如你所看到的，在UserAddresses和AvalibleAddresses之上的json中有兩個數組，所以我想要做的是我想將這個數組綁定到它們自己的類我實現了一個類名包含這兩個數組的地址：

export default class Address {

  constructor(avalibleAreas, userAddresses) {

    this._avalibleAreas = avalibleAreas;
    this._userAddresses = userAddresses;
  }

  get avalibleAddresses() {
    return this._avalibleAreas;
  }

  set avalibleAddresses(avalibleAreas) {
    this._avalibleAreas = avalibleAreas;
  }

  get userAddresses() {
    return this._userAddresses;
  }

  set userAddresses(userAddresses) {
    this._userAddresses = userAddresses;
  }
}

所以在得到回應后我在我的控制器中使用了這樣的類：

let address = new Address(responseAsjson.Model.AvailableAreas,responseAsjson.Model.UserAddresses)

console.log(address)

正如你可以看到我將兩個數組作為params傳遞給構造函數，然后console.log（地址）的結果是：

Address {_avalibleAreas: Array(4), _userAddresses: Array(4)}
_avalibleAreas: Array(4)
0: {AreaId: 1, AreaName: "داخل شهر", Cost: 0}
1: {AreaId: 2, AreaName: "شهرک عباس آباد", Cost: 5000}
2: {AreaId: 3, AreaName: "ویرمونی", Cost: null}
3: {AreaId: 6, AreaName: "راه آهن", Cost: null}

_userAddresses: Array(4)
0: {AddressId: 121, AddressName: "", AreaId: 1}
1: {AddressId: 122, AddressName: "", AreaId: 1}
2: {AddressId: 123, AddressName: "", AreaId: 1}
3: {AddressId: 124, AddressName: "", AreaId: 1}

現在的問題是我想在特定的類中使用UserAddresses和AvalibleAreas ，但我不知道如何做到這一點，例如將AreaId AreaName和Cost作為AvalibleAreas類的屬性。

Answer 1

我不確切地知道“在特定的類中”你的意思，但你可以創建兩個額外的類，如下所示：

class UserAddress {
  constructor(addressId, addressName, areaId) {
    this._addressId = addressId;
    this._addressName = addressName;
    this._areaId = areaId;
  }

  // place your getters and setters here
}

class AvailableArea {
  constructor(areaId, areaName, cost) {
    this._areaId = areaId;
    this._areaName = areaName;
    this._cost = cost;
  }

  // place your getters and setters here
}

然后用這個替換Address類中的舊構造函數：

constructor(availableAreas, userAddresses) {
  let a = [];
  let b = [];

  for (let i = 0; i < availableAreas.length; i++) {
    a.push(new AvailableArea(availableAreas[i].AreaId, availableAreas[i].AreaName, availableAreas[i].Cost));
  }
  for (let i = 0; i < userAddresses.length; i++) {
    b.push(new UserAddress(userAddresses[i].AddressId, userAddresses[i].AddressName, userAddresses[i].AreaId));
  }

  this._availableAreas = a;
  this._userAddresses = b;
}

, I think. 另外：不相關的問題，但avalible，就是要 ，我想。 這可能會節省一些調試時間。