Flutter数据处理与查询插件jsonata的使用
Flutter数据处理与查询插件jsonata的使用
特性
Jsonata插件为Flutter提供了使用Jsonata表达式查询和转换JSON数据的功能。
开始使用
权限设置
由于该插件使用了最新版本的jsonata,因此需要启用互联网权限:
Android:
在AndroidManifest.xml
文件中,添加以下权限以允许访问互联网:
<uses-permission android:name="android.permission.INTERNET" />
macOS / iOS:
对于macOS和iOS,你需要配置权限。在DebugProfile.entitlements
和ReleaseProfile.entitlements
文件中,添加以下键以允许网络访问:
DebugProfile.entitlements:
<key>com.apple.security.network.client</key>
<true/>
ReleaseProfile.entitlements:
<key>com.apple.security.network.client</key>
<true/>
Info.plist:
<key>NSAllowsArbitraryLoads</key>
<true/>
使用方法
插件允许你通过应用Jsonata查询来提取特定信息。以下是三种使用方式:
方式一
直接评估Jsonata表达式(jql)。
var json = await Jsonata(jql).evaluate(data);
方式二
创建一个Jsonata表达式对象,然后对其数据进行评估。
var expression = Jsonata(jql);
var json = await expression.evaluate(data);
方式三
先显式设置Jsonata实例的数据,然后用指定表达式查询。
var jsonata = Jsonata();
jsonata.set(data: data);
var json = await jsonata.query(jql);
示例代码
以下是完整的示例代码,展示了如何在Flutter应用中使用Jsonata插件。
import 'package:flutter/material.dart';
import 'package:jsonata/jsonata.dart';
void main() {
runApp(
const MaterialApp(home: MyHomePage()), // 使用MaterialApp
);
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
[@override](/user/override)
// ignore: library_private_types_in_public_api
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String data = '''{
"FirstName": "Fred",
"Surname": "Smith",
"Age": 28,
"Gender": "Male",
"Married": false,
"Address": {
"Street": "Hursley Park",
"City": "Winchester",
"Postcode": "SO21 2JN"
},
"Children": ["John","Jane","Jill"]
}''';
String jql = "Address.City='Winchester'";
String result = "";
[@override](/user/override)
void initState() {
super.initState();
}
query() async {
try {
// 方式一:
//var json = await Jsonata(jql).evaluate(data);
// 方式二:
//var expression = Jsonata(jql);
//var json = await expression.evaluate(data);
// 方式三:
var jsonata = Jsonata();
jsonata.set(data: data);
var json = await jsonata.query(jql);
setState(() {
result = json.toString();
});
} catch (e) {
setState(() {
result = 'Error: ${e.toString()}';
});
}
}
[@override](/user/override)
void dispose() {
super.dispose();
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('Jsonata查询应用'),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextFormField(
style: Theme.of(context).textTheme.bodySmall,
maxLines: null,
maxLength: 120,
decoration: InputDecoration(
hintText: data,
border: const OutlineInputBorder(),
),
onChanged: (value) => data = value,
),
TextFormField(
style: Theme.of(context).textTheme.bodySmall,
maxLines: 3,
maxLength: 120,
decoration: InputDecoration(
hintText: jql,
border: const OutlineInputBorder(),
),
onChanged: (value) => jql = value,
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: query,
child: const Text('查询'),
),
const SizedBox(height: 20),
Text(
result,
style: Theme.of(context).textTheme.bodySmall,
),
],
),
),
),
);
}
}
更多关于Flutter数据处理与查询插件jsonata的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在Flutter中处理JSON数据时,jsonata
是一个非常强大的查询和转换工具。它允许你使用类似于XPath的语法来查询和操作JSON数据。虽然 jsonata
是一个JavaScript库,但你可以通过Dart的 js
包将其引入到Flutter项目中。
1. 安装依赖
首先,你需要在 pubspec.yaml
文件中添加 js
依赖:
dependencies:
flutter:
sdk: flutter
js: ^0.6.5
2. 引入 jsonata
JavaScript库
你可以通过将 jsonata
JavaScript库引入到你的Flutter项目中。你可以使用 package:js
来调用JavaScript代码。
首先,创建一个 jsonata.js
文件,并引入 jsonata
库:
<!-- jsonata.js -->
<script src="https://cdn.jsdelivr.net/npm/jsonata/jsonata.min.js"></script>
3. 在Flutter中调用 jsonata
接下来,你可以在Flutter中使用 js
包来调用 jsonata
。
import 'package:flutter/material.dart';
import 'package:js/js.dart';
@JS('jsonata')
external dynamic jsonata(String expression);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Jsonata Example')),
body: Center(
child: JsonataExample(),
),
),
);
}
}
class JsonataExample extends StatelessWidget {
final jsonData = {
"name": "John",
"age": 30,
"address": {
"street": "123 Main St",
"city": "New York"
}
};
@override
Widget build(BuildContext context) {
// 使用jsonata查询JSON数据
var expression = jsonata(r'name');
var result = expression.evaluate(jsonData);
return Text('Result: $result');
}
}
4. 使用 jsonata
进行复杂查询
jsonata
支持复杂的查询和转换操作。例如,你可以使用以下表达式来查询嵌套的数据:
var expression = jsonata(r'address.city');
var result = expression.evaluate(jsonData);
print('City: $result'); // 输出: City: New York
你还可以使用 jsonata
进行数据转换、过滤、排序等操作。
5. 处理异步操作
如果 jsonata
的查询操作是异步的,你可以使用 Future
来处理:
Future<String> evaluateJsonata(String expression, dynamic data) async {
var expr = jsonata(expression);
return await promiseToFuture(expr.evaluate(data));
}
void main() async {
var jsonData = {
"name": "John",
"age": 30,
"address": {
"street": "123 Main St",
"city": "New York"
}
};
var result = await evaluateJsonata(r'address.city', jsonData);
print('City: $result'); // 输出: City: New York
}