在鸿蒙开发项目中用ArkUI(方舟UI框架)在读取JSON文件时的注意事项
JSON是一种轻量级数据交换格式,采用键值对结构(键名必须双引号包裹),支持字符串、数字、布尔值、数组、对象和null等数据类型。常见错误包括键名未加双引号、使用单引号字符串、末尾多余逗号或添加注释(JSON标准不支持)。示例展示了包含嵌套对象和数组的正确JSON结构。实际应用中,可通过JSON.parse()解析文件内容,如加载城市数据时,需定义接口类型并遍历嵌套结构提取所需信息。验证工具如JS
·
1.JSON 文件的基本结构(首先要明确格式)
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用文本格式,易于人阅读和编写,也易于机器解析和生成。JSON 文件必须遵循严格的语法规则。
语法规则
- 键值对:数据以键值对形式存储,键和值之间用冒号
:分隔。 - 逗号分隔:多个键值对之间用逗号
,分隔。 - 花括号
{}:表示对象(Object),包含无序的键值对集合。 - 方括号
[]:表示数组(Array),包含有序的值列表。 - 字符串:必须用双引号
""包裹,单引号无效。 - 数据类型:支持字符串、数字、布尔值、数组、对象、
null。
示例
{
"name": "John Doe",
"age": 30,
"isStudent": false,
"hobbies": ["reading", "hiking", "coding"],
"address": {
"street": "123 Main St",
"city": "New York"
},
"hasPet": null
}
常见错误及修正
-
键未用双引号包裹
错误:{ name: "John" }
修正:{ "name": "John" } -
字符串使用单引号
错误:{ 'name': 'John' }
修正:{ "name": "John" } -
末尾多余的逗号
错误:{ "a": 1, "b": 2, }
修正:{ "a": 1, "b": 2 } -
注释无效
错误:{ /* comment */ "a": 1 }
修正:JSON 标准不支持注释,需删除注释。
验证工具
使用在线工具(如 JSONLint)或代码编辑器(如 VS Code)可快速验证 JSON 格式是否正确。
在这里用读取city.json 文件为例
// 导入缓冲区模块,用于处理二进制数据转换 import buffer from '@ohos.buffer';
// 定义城市选项接口,用于Select组件的选项数据格式
interface CityItem { value: string; }
// 定义省份内城市数据结构,包含城市名称和区域列表
interface CityInProvince {
name: string;
area: string[];
}
// 定义省份数据结构,包含省份名称和下属城市列表
interface ProvinceData {
name: string;
city: CityInProvince[];
}
// 定义根数据结构,包含所有省份数据的数组
interface RootData { data: ProvinceData[]; }
// 异步方法:加载城市数据文件并解析
async loadData(): Promise<void> {
// 获取当前页面上下文
const context = getContext(this);
// 从资源管理器中读取city.json文件的原始内容
const rawFile = await context.resourceManager.getRawFileContent('city.json');
// 将二进制数据转换为Buffer对象,再转换为UTF-8字符串,最后解析为JSON对象
const data: RootData = JSON.parse(buffer.from(rawFile.buffer).toString('utf8'));
// 清空现有城市列表
this.cities = [];
// 双重循环遍历:外层遍历所有省份,内层遍历每个省份下的城市
// 将每个城市的名称提取并添加到cities数组中
data.data.forEach(p => p.city.forEach(c => this.cities.push({ value: c.name })));
}更多推荐
在这里用读取city.json 文件为例



所有评论(0)