Как связать массив объектов json с массивом класса javascript в ES6

Question

Я работаю над одностраничным приложением, которое подключено к спокойному веб-сервису в Reactjs. Моя проблема не связана с 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
    }]
  }
}

Как вы можете видеть, в json есть два массива выше UserAddresses и AvalibleAddresses , поэтому я хочу связать это с массивами с их собственными классами, которые я реализовал Адрес имени класса, который включает оба из них в массив:

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

Также: не имеет отношения к вопросу, но доступно должно быть доступно , я думаю.Это может сэкономить вам время на отладку.