ArkTs学习之JSON数据转Model

一、Json数据转Model

1. 定义模型： 在你的项目中，定义一个 TypeScript 模型来表示你的数据。例如，我们创建一个 Person 模型。

// src/models/Person.ts
export interface Person {
    name: string;
    age: number;
}

2. 创建界面： 在你的应用中创建一个简单的界面，用于展示数据。这个界面可以是一个简单的文本视图，显示人员信息。

@Entry
@Component
struct MyIndex {
  build() {
    Row() {
      Column() {
        Text()
        Text()
      }.width('100%')
    }.height('100%')
  }
}

3. 解析 JSON 并展示数据

import { Person } from '../Model/Person'

@Entry
@Component
struct MyIndex {
  /** 普通变量 */
  @State person: Person = { name: '', age: 0 };

  /** 生命周期 */
  onPageShow(): void {
    this.parseJson()
  }

  /** 普通函数 */
  private parseJson() {
    const jsonString = '{"name":"John Doe","age":30}'
    this.person = JSON.parse(jsonString) //通过JSON.parse 完成数据转模型
  }

  /** 构建函数 */
  build() {
    Row() {
      Column() {
        Text(`name:${this.person.name}`)
        Text(`age:${this.person.age}`)
      }.width('100%')
    }.height('100%')
  }
}

在这个简单的示例中，我们定义了一个 Person 接口来表示我们的数据模型，并在 MyIndex 类中创建了界面和解析逻辑。当应用启动时，它会解析一个硬编码的 JSON 字符串到 Person 对象，并在界面上显示这个人的姓名和年龄。

当然，实际项目中都会使用一些第三方框架来处理JSON数据转Model的工作，譬如iOS中的YYModel、Flutter中的FlutterJsonBeanFactory插件等，鸿蒙社区中也提供了JSON给我们使用

⚠️ 注意：HarmonyOS中使用JSON.parse报错Structural typing is not supported (arkts-no-structural-typing)

有手动引入JSON，删掉即可

二、arkts json解析

JSON格式，(简写JavaScript Object Notation)，是一种用于数据交换的文本格式，书写简单。基于JavaScript原生语法，能够序列化对象、数组、数值、字符串、布尔值和 null。

1. JSON.parse 

使用 JSON.parse解析json

parse(text: string, reviver?: Transformer, options?: ParseOptions): Object | null

用于解析JSON字符串生成对应ArkTS对象或null。

参数：

返回值：

🍀 示例一：通过 interface 配合 JSON.parse 解析数据

interface Person {
  name: string;
  age: number;
  city: string;
}
let jsonText = '{"name": "John", "age": 30, "city": "ChongQing"}';
let person:Person=JSON.parse(jsonText)as Person;
console.info("personinterface  getpersonname--- > "+ person.name);
console.info("personinterface getpersonage--- > "+ person.age);
console.info("personinterface getpersoncity--- > "+ person.city);

我们查看打印效果

🍀 示例二：通过一个class配合 JSON.parse 解析数据

class  Persontest {
 　name: string='';
 　age: number=0;
 　city: string='';
}
let jsonText = '{"name": "John", "age": 30, "city": "ChongQing"}';
let persontest:Persontest=JSON.parse(jsonText.toString()) as Persontest;
console.info("personclass getpersontest--- > "+ persontest.name);
console.info("personclass getpersontest--- > "+ persontest.age);
console.info("personclass getpersontest--- > "+ persontest.city);

我们查看打印效果

2. JSON.stringify

该方法将一个ArkTS对象或数组转换为JSON字符串，对于容器支持线性容器转换，非线性的容器不支持。

返回值：

🍀 示例一：将arkts对象 转成json字符串

export interface Person {
  name: string
  age: number
  city: string
}

let person: Person = {
  name: 'John',
  age: 30,
  city: "ChongQing"
}
let str1 = JSON.stringify(person)

🍀 示例二：将arkts 数组转成json 字符串

export interface Person {
  name: string
  age: number
  city: string
}

let person: Person[] = [
  { name: "徐庆", age: 31, city: "湖北" },
  { name: "宇智波斑", age: 80, city: "宇智波" },
  { name: "万祐宁", age: 30, city: "湖北" },
  { name: "千手柱间", age: 79, city: "木叶" },
  { name: "我爱罗", age: 28, city: "沙影村" },
  { name: "佩恩", age: 34, city: "雨影村" },
]
let str1 = JSON.stringify(person)

3. JSON.has

has(obj: object, property: string): boolean 检查ArkTS对象是否包含某种属性，可用于JSON.parse解析JSON字符串之后的相关操作。has接口仅支持最外层为字典形式（即大括号而非中括号包围）的合法json串。

参数：

返回值：

🍀 示例一

 let jsonText = '{"name": "John", "age": 30, "city": "ChongQing"}';
 let obj = JSON.parse(jsonText);
 let hasrst = JSON.has(obj, "name");
 console.info("getrst --- > "+ hasrst);

我们可以查看到如果has包含了我们json字符串里面的key值就返回true 反之不包含就返回false

4. JSON.remove

remove(obj: object, property: string): void

从ArkTS对象中删除某种属性，可用于JSON.parse解析JSON字符串之后的相关操作。remove接口仅支持最外层为字典形式（即大括号而非中括号包围）的合法json串。

参数：

 🍀 示例一：

 let jsonText = '{"name": "John", "age": 30, "city": "ChongQing"}';
 let obj = JSON.parse(jsonText);
 let hasrst = JSON.has(obj, "name");
 let removerst = JSON.remove(obj, "name");
 let gethasrst = JSON.has(obj, "name");
 console.info("indexgetrst --- > "+ hasrst);
 console.info("indexgethasrst --- > "+ gethasrst);

我们可以观察到我们删除前后 删除前调用 JSON.has 前我们的返回true 证明json里面包含 name 这个字段 我们在执行了 JSON.remove 再去查询的时候就返回false了,证明我们的api方法执行成功了。