Flutter数据处理与查询插件jsonata的使用

Flutter数据处理与查询插件jsonata的使用

特性

Jsonata插件为Flutter提供了使用Jsonata表达式查询和转换JSON数据的功能。

开始使用

权限设置

由于该插件使用了最新版本的jsonata,因此需要启用互联网权限:

Android:

AndroidManifest.xml文件中,添加以下权限以允许访问互联网:

<uses-permission android:name="android.permission.INTERNET" />

macOS / iOS:

对于macOS和iOS,你需要配置权限。在DebugProfile.entitlementsReleaseProfile.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,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
1 回复

更多关于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
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!