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中有两个数组，所以我想做的是将其绑定到数组上自己的类中我实现了一个类名Address，将这两个都包含在数组中：

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)

并且您可以看到我将这两个数组作为参数传递给了构造函数，然后 console.log（address）的结果是：

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;
}

也：与问题无关，但我认为可用是指可用。这样可以节省一些调试时间。

如何在ES6中将json对象数组绑定到javascript类数组

1 个答案: