Angular 5：将JSON解析为类对象时持续报错求助

我明白你现在遇到的问题——直接用JSON.parse解析得到的只是普通JavaScript对象，不是你定义的类实例，所以会出现各种不符合预期的情况（比如类方法无法调用、类型校验失效等）。下面给你一步步的解决方法：

第一步：定义匹配JSON结构的模型类 #

首先你需要创建一个和JSON字段完全对应的类，记得处理特殊类型（比如日期）：

export class Resource {
  resourceName: string;
  resourceType: string;
  summary: string;
  director: string;
  length: number;
  yearDate: number;
  uploadDate: Date;

  // 示例类方法（如果需要的话）
  getUploadDateDisplay(): string {
    return this.uploadDate.toLocaleDateString('en-US');
  }
}

第二步：解析JSON并转换为类实例 #

不能直接用JSON.parse完事，需要把解析后的普通对象映射到类的实例上，这里有几种常用方法：

方法1：手动映射（最直观） #

// 先解析JSON得到普通对象数组
const plainResourceList = JSON.parse(allResourceString) as any[];

// 逐个转换为Resource实例
const resourceList: Resource[] = plainResourceList.map(item => {
  const resource = new Resource();
  resource.resourceName = item.resourceName;
  resource.resourceType = item.resourceType;
  resource.summary = item.summary;
  resource.director = item.director;
  resource.length = item.length;
  resource.yearDate = item.yearDate;
  // 重点：把JSON中的日期字符串转为Date对象
  resource.uploadDate = new Date(item.uploadDate);
  return resource;
});

方法2：用Object.assign简化代码 #

如果字段很多，手动赋值太麻烦，可以用Object.assign快速赋值：

const plainResourceList = JSON.parse(allResourceString) as any[];

const resourceList: Resource[] = plainResourceList.map(item => 
  Object.assign(new Resource(), {
    ...item,
    // 单独处理日期类型
    uploadDate: new Date(item.uploadDate)
  })
);

方法3：添加静态工厂方法（复用性更强） #

在Resource类里添加一个静态方法，专门用来转换普通对象，以后哪里需要转换都可以直接调用：

export class Resource {
  // ... 字段定义和类方法

  static fromPlainObject(plainObj: any): Resource {
    const resource = new Resource();
    resource.resourceName = plainObj.resourceName;
    resource.resourceType = plainObj.resourceType;
    resource.summary = plainObj.summary;
    resource.director = plainObj.director;
    resource.length = plainObj.length;
    resource.yearDate = plainObj.yearDate;
    resource.uploadDate = new Date(plainObj.uploadDate);
    return resource;
  }
}

// 使用方式
const plainResourceList = JSON.parse(allResourceString) as any[];
const resourceList: Resource[] = plainResourceList.map(Resource.fromPlainObject);

常见坑点提醒 #

• 字段名大小写必须完全匹配：JSON里的resourceName和类里的resourceName要一致，大小写错了会导致字段赋值失败
• 日期类型处理：JSON里的日期是字符串，必须手动转为Date对象，否则会是字符串类型，无法调用Date的方法
• 类方法的有效性：只有通过new Resource()创建的实例才能调用类里的方法，普通JSON对象是不行的

内容的提问来源于stack exchange，提问作者Oshri Malul