TypeError:无法读取ES6模型上未定义的属性“ first_name”

时间:2018-12-07 00:33:35

标签: javascript json ecmascript-6

我想在es6模型中设置JSON API,但出现此错误     TypeError:无法读取未定义的属性“ first_name”

JSON API:

{
      "type": "user",
      "id": 2,
      "attributes": {
        "username": "madelynn81",
        "email": "taylor63@mills.biz",
        "first_name": "Emile",
        "last_name": "Veum",
        "created_at": "2018-11-17 11:48:13"
      },
      "links": {
        "self": "http://test.test/api/v1/user/2"
      }
    }

es6模型

class UserModel {
    constructor(data) {
        this.id = data.id;
        this.first_name = data.attributes.first_name;
        this.last_name = data.attributes.last_name;
        this.username = data.attributes.username;
        this.email = data.attributes.email;
        this.created_at = data.attributes.created_at;
        this.link = data.links.self;
    }

    get getId() {
        return this.id;
    }

    set setId(value) {
        this.id = value;
    }

    get getFirstName() {
        return this.first_name;
    }

    set setFirstName(value) {
        this.first_name = value;
    }

    get getLastName() {
        return this.last_name;
    }

    set setLastName(value) {
        this.last_name = value;
    }

    get getUsername() {
        return this.username;
    }

    set setUsername(value) {
        this.username = value;
    }

    get getEmail() {
        return this.email;
    }

    set setEmail(value) {
        this.email = value;
    }

    get getCreatedAt() {
        return this.created_at;
    }

    set setCreatedAt(value) {
        this.created_at = value;
    }

    get getLink() {
        return this.link
    }

    set setLink(value) {
        this.link = value
    }
}

我该如何解决

2 个答案:

答案 0 :(得分:1)

您的问题尚不清楚,您如何使用吸气剂获得价值。一个问题:您的设置/获取对应使用相同的属性名称命名。它们的名称应与持有值的属性不同。例如:_id代表值属性名称,id代表获取/设置名称。

class UserModel {

  constructor(data) {
    this._id = data.id;
    this._firstName = data.attributes.first_name;
  }

  get id() {
    return this.id;
  }

  set id(value) {
    this._id = value;
  }

  get firstName() {
    return this._firstName;
  }

  set firstName(value) {
    this._firstName = value;
  }

}
const data = {
  "type": "user",
  "id": 2,
  "attributes": {
    "username": "madelynn81",
    "email": "taylor63@mills.biz",
    "first_name": "Emile",
    "last_name": "Veum",
    "created_at": "2018-11-17 11:48:13"
  },
  "links": {
    "self": "http://test.test/api/v1/user/2"
  }
}

const user = new UserModel(data);
console.log(user.firstName)

答案 1 :(得分:0)

我不确定您的目标是什么,但是通常在javascript中使用的语法更简单,并且对象很像数组。

这是一个简单的例子:

    const data = {
      "type": "user",
      "id": 2,
      "attributes": {
        "username": "madelynn81",
        "email": "taylor63@mills.biz",
        "first_name": "Emile",
        "last_name": "Veum",
        "created_at": "2018-11-17 11:48:13"
      },
      "links": {
        "self": "http://test.test/api/v1/user/2"
      }
    }

    const user = { 
      id: data.id,
      firstName: data.attributes.first_name,
      // other props,
    };

    console.log(user.firstName);

实际上,如果您注意一下,您的数据本身已经是一个对象。