将 json 数据转换为 component.ts 中的对象

Posted

技术标签:

【中文标题】将 json 数据转换为 component.ts 中的对象【英文标题】:convert json data to object in component.ts 【发布时间】:2019-03-15 05:49:02 【问题描述】:

我有 json 数据,我想将其转换为对象格式以进行创建操作。

json

[

    "user": 
        "id": 83,
        "username": "das",
        "first_name": "dsafha",
        "last_name": "dfksdfk",
        "email": "sasda@gmail.com",
        "is_active": true,
        "is_superuser": false
    ,
    "role": "testBu"
,

    "user": 
        "id": 84,
        "username": "sadfds",
        "first_name": "dshhgds",
        "last_name": "fsdjsl",
        "email": "fdjgd@gmail.com",
        "is_active": true,
        "is_superuser": false
    ,
    "role": "testeditrole"
,

    "user": 
        "id": 86,
        "username": "fs",
        "first_name": "efhks",
        "last_name": "sofdh",
        "email": "fdshk@gmail.com",
        "is_active": true,
        "is_superuser": false
    ,
    "role": "testeditrole"
,

    "user": 
        "id": 87,
        "username": "xz",
        "first_name": "vj",
        "last_name": "vkfd",
        "email": "sdsl@gmail.com",
        "is_active": true,
        "is_superuser": false
    ,
    "role": "testeditrole"

]

我试过这样做

组件.ts

let user:any = ;
   user["username"] = this.user.user.email
   user["first_name"] = this.user.user.first_name
   user["last_name"]= this.user.user.last_name
   user["email"]= this.user.user.email

   this.userData["user"] = user
   this.userData["role"] = this.user.role

在将数据输入输入字段后进行安慰时,我没有得到角色数据。我确实得到了其他数据。角色数据显示为空。我确实认为是因为我在 componet.ts 中编写代码的方式导致了问题。

【问题讨论】:

【参考方案1】:

您始终可以创建模型:

export class User 
 id: string,
 username: string,
 first_name: string,
 last_name: string,
 email: string,
 is_active: boolean,
 is_superuser: boolean

    
export class UserDetails
 user:User;
 role:string;

然后:

// Assume you have received the json in string form in
'resultlist' variable
let dataList = <Array<UserDetails>>JSON.parse(resultlist);

或者:

// Assume you have received the json in object form in 'resultlist' variable
let dataList = <Array<UserDetails>>resultlist;

【讨论】:

【参考方案2】:

我认为最好的方法是,创建一个与 JSON 结构对应的对象,然后将数据 JSON 分配给对象的数组。

class User
   id:string;
   username:string;
   firstName:string;
   lastName:string;
   email:string;
   isActive:boolean;
   isSuperviser:boolean;

class JSONData
   user:User;
   role:string

 data:JSONData[] = yourJson.data;

您可以像在班级中一样调整json数据中的属性名称,并且可以正确轻松地处理数据,请参阅此链接以获取more infos

【讨论】:

【参考方案3】:

无需转换。它已经是 json 格式,但您应该使用数组索引然后设置用户变量。

例如:

let user:any = ;
user = this.user[arrayIndex].user;

this.userData["user"] = user
this.userData["role"] = this.user[arrayIndex].role;

如果你想从 json 数组中获取数据,你应该使用数组索引。 像这样。

let user:any = ;
user = this.user[0].user;
this.userData["role"] = this.user[0].role;

【讨论】:

【参考方案4】:

this.userData["role"] = this.user.role 应该是this.userData["role"] = this.role

【讨论】:

以上是关于将 json 数据转换为 component.ts 中的对象的主要内容,如果未能解决你的问题,请参考以下文章

调用json数据时出错

仅使用 Angular 7 将 json 数据写入本地 JSON 文件

Ionic 2:当我将数组传递给组件时,我在 component.ts 上得到一个字符串

将数据传递给文件 child.component.ts 文件而不是子模板

Angular 5 - 实现数据服务以从 MongoDB 读取 JSON

如何在component.ts,angular2中将数据从一个函数传递到另一个函数