目录
第三步：读取文件内容，使用解析库提取数据，转换为应用所需数据结构。
通过读取本地文件，利用JSON解析库，高效提取数据结构，简化数据处理流程，提升应用响应速度，确保信息准确无误，优化用户体验。
本章内容，我们详细讲解解析本地json文件的具体步骤，包括文件读取、数据解析。通过实例演示，展示如何将JSON数据转化为应用所需格式，提升代码可读性和维护性。
第一步：准备JSON文件，确保格式规范无误。
{
"data": [
{
"id": 1,
"name": "奢侈",
"image": "SC.jpg",
"writer": "折火一夏",
"summary": "聂染青一直以为，她割舍了年少时爱恋的人后就不会再体验到爱的滋味。直到后来她才发现，原来那个肯在她狼狈不堪时笑着接受她所有的男人，竟是今后再也无法戒掉的温暖。她不清楚习进南为何要娶她，于是本着负责任的态度，在他求婚的时候戳着桌子直视他，很认真地提醒他：“你要想清楚，我不够好。”"
},
{
"id": 2,
"name": "萌医甜妻",
"image": "MYTQ.jpg",
"writer": "酒小七",
"summary": "田七是位“不祥之人”，但由于能力超凡，被皇上看中，提拔到御前。朝夕相处之中，田七的老底儿被识破。原来，田七是个妙龄女子，而且是忠臣季青云之女季昭。七年前，季青云被奸臣所害、家破人亡，季昭侥幸逃脱，为报仇，她借假身份入了宫……一个又一个秘密被揭穿，皇上不仅没有降罪，反而万分高兴。因为皇帝对田七早已暗生情愫，并且还想让她做皇后。但是身负家仇的田七，对皇上的感情却越来越痛苦而矛盾……"
},
{
"id": 3,
"name": "云边有个小卖部",
"image": "XMB.jpg",
"writer": "张嘉佳",
"summary": "“有些人刻骨铭心，没几年会遗忘。有些人不论生死，都陪在身旁。”满镇开着桔梗，蒲公英飞得比石榴树还高，一直飘进山脚的稻海。在大多数人心中，自己的故乡后来会成为一个点，如同亘古不变的孤岛。外婆说，什么叫故乡，祖祖辈辈埋葬在这里，所以叫故乡。刘十三就这样，看着小女孩像梦境一般，马尾辫，眉清目秀，向他走过来。毫无疑问，刘十三认为，这场面会铭记一生。"
},
{
"id": 4,
"name": "阿勒泰的角落",
"image": "ALT.jpg",
"writer": "李娟",
"summary": "作者以天然而纯真的笔调描述阿勒泰地区哈萨克族日常生活点滴趣事：做裁缝、可爱的孩子、来来去去的陌生人。她刻画的不是一组有关新疆的异域风情，她刻画的是我们内心的牧歌：白雪和阳光，青草和白桦林，优美、明亮。"
},
}准备好JSON文件之后，将文件保存为“books.json”，存放在rawfile目录下，将“books.json”文件保存至“rawfile”目录后，需确保路径设置正确，以便后续程序顺利读取数据。同时，定期备份该文件，防止数据丢失。在后续开发中，可根据实际需求对JSON结构进行调整和优化，以提高数据处理效率。
如图所示：
第二步：导入JSON解析库，创建文件读取对象。
解析JSON文件之前我们需要写一个model类象。首先，定义一个名为`BookModel`的类，包含`id`、`name`、`image`、`writer`和`summary`五个属性，并实现构造方法和字符串表示方法。接着，使用`json`库中的`load`函数读取`books.json`文件
export class BookModel {
data:Array<BookModelData>=[];
}
export class BookModelData {
id?: number;
name?: string;
image?: string;
writer?: string;
summary?: string;
}```typescript
然后再加载我们本地的json文件并解析数据
注意：代码我都尽量做了注释，我就不再做文章铺垫了，直接上菜
aboutToAppear() {
// 获取上下文
let MContext = getContext() as common.UIAbilityContext;
// 调用 getjsonfile 方法并传入上下文
this.getjsonfile(MContext);
}
async getjsonfile(context: common.UIAbilityContext) {
// 从资源管理器中获取名为 'data.json' 的文件内容
let getjson = await context.resourceManager.getRawFileContent('book.json');
// 创建 TextDecoderOptions 对象，设置 ignoreBOM 为 true
let textDecoderOptions: util.TextDecoderOptions = { ignoreBOM: true };
// 创建 TextDecoder 实例，指定编码为 'utf-8' 并传入 TextDecoderOptions
let textDecoder = util.TextDecoder.create('utf-8', textDecoderOptions);
// 使用 TextDecoder 的 decodeWithStream 方法解码 JSON 数据，设置 stream 为 false 以一次性解码整个数据
let result = textDecoder.decodeWithStream(getjson, { stream: false });
// 将解码后的字符串解析为 JSON 对象
let Bookmodel: BookModel = JSON.parse(result);
// 将解析得到的 BookModel 对象中的 data 属性赋值给类的 Booklist 属性
this.Booklist =Bookmodel.data;
}第三步：读取文件内容，使用解析库提取数据，转换为应用所需数据结构。
解析完JSON文件之后，我们就可以调用刚才解析完成的数据了，通过遍历Booklist属性，获取每本书的详细信息，如书名、作者、出版日期等。这些数据将被用于后续的展示和操作，确保应用功能的完整性和用户体验的流畅性。遍历过程中，需注意数据格式的校验和异常处理，避免因数据问题导致程序崩溃。每本书的信息将被封装成对象，便于后续操作和展示。同时，利用这些信息可以构建书籍详情页面，提供用户友好的交互界面。
UI界面布局：
绘制UI界面之前，我们需要定义一个 Booklist 数组，用于存储书籍数据
@State Booklist :Array<BookModelData>=[]初始化 Booklist 数组，确保数据结构一致
// 遍历 JSON 数据，
定义书籍展示组件，利用Booklist数据渲染列表
build() {
Column() {
List({ space: 5 }) {
ForEach(this.Booklist, (item: BookModelData, index) => {
ListItem() {
Row() {
Image($rawfile(item.image))
.height(150).width(100)
Column({ space: 2 }) {
Row() {
Text(item.name).fontSize(23)
}.width('80%').justifyContent(FlexAlign.SpaceBetween)
Text(item.writer).fontSize(20).fontColor(Color.Gray)
Text(item.summary)
.fontSize(16)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(5)
.fontColor(Color.Gray)
Divider()
}
.alignItems(HorizontalAlign.Start)
.width('300').height('100%')
}
}.height(150)
})
}
}
.backgroundColor(Color.White)
.width('100%')
.height('100%')
}
案例完整代码：
Book.json代码
{
"data": [
{
"id": 1,
"name": "奢侈",
"image": "SC.jpg",
"writer": "折火一夏",
"summary": "聂染青一直以为，她割舍了年少时爱恋的人后就不会再体验到爱的滋味。直到后来她才发现，原来那个肯在她狼狈不堪时笑着接受她所有的男人，竟是今后再也无法戒掉的温暖。她不清楚习进南为何要娶她，于是本着负责任的态度，在他求婚的时候戳着桌子直视他，很认真地提醒他：“你要想清楚，我不够好。”"
},
{
"id": 2,
"name": "萌医甜妻",
"image": "MYTQ.jpg",
"writer": "酒小七",
"summary": "田七是位“不祥之人”，但由于能力超凡，被皇上看中，提拔到御前。朝夕相处之中，田七的老底儿被识破。原来，田七是个妙龄女子，而且是忠臣季青云之女季昭。七年前，季青云被奸臣所害、家破人亡，季昭侥幸逃脱，为报仇，她借假身份入了宫……一个又一个秘密被揭穿，皇上不仅没有降罪，反而万分高兴。因为皇帝对田七早已暗生情愫，并且还想让她做皇后。但是身负家仇的田七，对皇上的感情却越来越痛苦而矛盾……"
},
{
"id": 3,
"name": "云边有个小卖部",
"image": "XMB.jpg",
"writer": "张嘉佳",
"summary": "“有些人刻骨铭心，没几年会遗忘。有些人不论生死，都陪在身旁。”满镇开着桔梗，蒲公英飞得比石榴树还高，一直飘进山脚的稻海。在大多数人心中，自己的故乡后来会成为一个点，如同亘古不变的孤岛。外婆说，什么叫故乡，祖祖辈辈埋葬在这里，所以叫故乡。刘十三就这样，看着小女孩像梦境一般，马尾辫，眉清目秀，向他走过来。毫无疑问，刘十三认为，这场面会铭记一生。"
},
{
"id": 4,
"name": "阿勒泰的角落",
"image": "ALT.jpg",
"writer": "李娟",
"summary": "作者以天然而纯真的笔调描述阿勒泰地区哈萨克族日常生活点滴趣事：做裁缝、可爱的孩子、来来去去的陌生人。她刻画的不是一组有关新疆的异域风情，她刻画的是我们内心的牧歌：白雪和阳光，青草和白桦林，优美、明亮。"
},
}BookModel类代码
export class BookModel {
data:Array<BookModelData>=[];
}
export class BookModelData {
id?: number;
name?: string;
image?: string;
writer?: string;
summary?: string;
}
//UI界面代码
import { common } from '@kit.AbilityKit';
import { util } from '@kit.ArkTS';
import { BookModel, BookModelData } from '../model/BookModel';
@Entry
@Component
struct Index {
// 定义一个 Booklist 数组，用于存储书籍数据
@State Booklist :Array<BookModelData>=[];
aboutToAppear() {
// 获取上下文
let MContext = getContext() as common.UIAbilityContext;
// 调用 getjsonfile 方法并传入上下文
this.getjsonfile(MContext);
}
async getjsonfile(context: common.UIAbilityContext) {
// 从资源管理器中获取名为 'data.json' 的文件内容
let getjson = await context.resourceManager.getRawFileContent('book.json');
// 创建 TextDecoderOptions 对象，设置 ignoreBOM 为 true
let textDecoderOptions: util.TextDecoderOptions = { ignoreBOM: true };
// 创建 TextDecoder 实例，指定编码为 'utf-8' 并传入 TextDecoderOptions
let textDecoder = util.TextDecoder.create('utf-8', textDecoderOptions);
// 使用 TextDecoder 的 decodeWithStream 方法解码 JSON 数据，设置 stream 为 false 以一次性解码整个数据
let result = textDecoder.decodeWithStream(getjson, { stream: false });
// 将解码后的字符串解析为 JSON 对象
let Bookmodel: BookModel = JSON.parse(result);
// 将解析得到的 BookModel 对象中的 data 属性赋值给类的 Booklist 属性
this.Booklist =Bookmodel.data;
}
build() {
Column() {
List({ space: 5 }) {
ForEach(this.Booklist, (item: BookModelData, index) => {
ListItem() {
Row() {
Image($rawfile(item.image))
.height(150).width(100)
Column({ space: 2 }) {
Row() {
Text(item.name).fontSize(23)
}.width('80%').justifyContent(FlexAlign.SpaceBetween)
Text(item.writer).fontSize(20).fontColor(Color.Gray)
Text(item.summary)
.fontSize(16)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(5)
.fontColor(Color.Gray)
Divider()
}
.alignItems(HorizontalAlign.Start)
.width('300').height('100%')
}
}.height(150)
})
}
}
.backgroundColor(Color.White)
.width('100%')
.height('100%')
}
}
案例样式图：
扫一扫
9001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
