extJS4.2.0 Json数据解析,嵌套及非嵌套（二）

Ext.data.reader.Reader

Readers通常用于翻译数据，使其被加载为 Model 实例或Store, 该数据一般是一个AJAX请求的响应数据. 一般情况下不需要直接创建一个Reader实例， 因为Reader总是和Proxy一起使用， 且其将使用Proxy的reader 配置属性配置


1

2

3

4

5

6

7

8

9

10

11

Ext.create(‘Ext.data.Store‘, {

    model: ‘User‘,

    proxy: {

        type: ‘ajax‘,

        url : ‘users.json‘,

        reader: {

            type: ‘json‘,

            root: ‘users‘

        }

    },

});

以上的reader是配置来消耗一个JSON字符串，使其开起来如下:


1

2

3

4

5

6

7

{

    "success": true,

    "users": [

        { "name": "User 1" },

        { "name": "User 2" }

    ]

}

加载嵌套数据

根据每个模型上的associations配置，Readers拥有自动加载多级嵌套的数据对象的能力. 以下是一个例子，用于验证一个虚构的CRM系统（管理了User、Orders、OrderItems、Products等模型）中的各种结合的灵活性。 首先我们要定义这些模型:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

Ext.define("User", {

    extend: ‘Ext.data.Model‘,

    fields: [

        ‘id‘, ‘name‘

    ],

    hasMany: {model: ‘Order‘, name: ‘orders‘},

    proxy: {

        type: ‘rest‘,

        url : ‘users.json‘,

        reader: {

            type: ‘json‘,

            root: ‘users‘

        }

    }

});

Ext.define("Order", {

    extend: ‘Ext.data.Model‘,

    fields: [

        ‘id‘, ‘total‘

    ],

    hasMany  : {model: ‘OrderItem‘, name: ‘orderItems‘, associationKey: ‘order_items‘},

    belongsTo: ‘User‘

});

Ext.define("OrderItem", {

    extend: ‘Ext.data.Model‘,

    fields: [

        ‘id‘, ‘price‘, ‘quantity‘, ‘order_id‘, ‘product_id‘

    ],

    belongsTo: [‘Order‘, {model: ‘Product‘, associationKey: ‘product‘}]

});

Ext.define("Product", {

    extend: ‘Ext.data.Model‘,

    fields: [

        ‘id‘, ‘name‘

    ],

    hasMany: ‘OrderItem‘

});

这个可能有很多种理解 - 基本上，一个Usrer拥有多个Orders，而每个Orders是由多个OrderItems组成的。 最后，每个OrderItem都包含单独一个Product. 这就允许我们重构造数据如下：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

{

    "users": [

        {

            "id": 123,

            "name": "Ed",

            "orders": [

                {

                    "id": 50,

                    "total": 100,

                    "order_items": [

                        {

                            "id"      : 20,

                            "price"   : 40,

                            "quantity": 2,

                            "product" : {

                                "id": 1000,

                                "name": "MacBook Pro"

                            }

                        },

                        {

                            "id"      : 21,

                            "price"   : 20,

                            "quantity": 3,

                            "product" : {

                                "id": 1001,

                                "name": "iPhone"

                            }

                        }

                    ]

                }

            ]

        }

    ]

}

该JSON响应就是多级嵌套- 将返回所有的Users(在本例中为简单起见，只写了一个User), 每个User中的Orders的所有项(一样只写其中一个为例)， 每个Order中的OrderItems的所有项(本例中显示了2个order项),最后Product通过每个OrderItem关联在一起. 现在我们可以读取数据并使用它通过如下方式：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

var store = Ext.create(‘Ext.data.Store‘, {

    model: "User"

});

store.load({

    callback: function() {

        //被加载的user

        var user = store.first();

        console.log("Orders for " + user.get(‘name‘) + ":")

        //遍历每个User中的Orders

        user.orders().each(function(order) {

            console.log("Order ID: " + order.getId() + ", which contains items:");

            //遍历每个Order中的OrderItems

            order.orderItems().each(function(orderItem) {

                //我们都知道Product数据已经被加载，所以我们可以使用同步方法getProduct

                //一般来说，我们会使用异步版本的 (参考 Ext.data.association.BelongsTo)

                var product = orderItem.getProduct();

                console.log(orderItem.get(‘quantity‘) + ‘ orders of ‘ + product.get(‘name‘));

            });

        });

    }

});

运行以上代码，结果如下:


1

2

3

4

Orders for Ed:

Order ID: 50, which contains items:

2 orders of MacBook Pro

3 orders of iPhone

来自为知笔记(Wiz)

时间： 2024-11-08 18:31:44

extJS4.2.0 Json数据解析,嵌套及非嵌套（二）的相关文章

json数据解析，并实现将网络json数据获取用listview显示

需要使用jar包 fastjson或gson这两个jar包. //Gson的使用方式 Gson gson=new Gson(); String str=ReadAssetsFile.readtext(this,"json_ss");//this当前类,"json_ss"需要解析的文件名 UserMessage userMessage=gson.fromJson(str,UserMessage.class);//需要解析的json文件最外层类名 //fastjson的

【Qt编程】基于Qt的词典开发系列<九>--JSON数据解析

在上一篇文章<用户登录及API调用的实现>中,我通过程序实现了用户登录及API调用的实现.从而能够实现网络查词.添词的操作.可是.从上文中能够看到.调用API后返回的是JSON格式的数据,例如以下图所看到的(在QtCreator中的显示): 为了更好的观察JSON格式.我整理后显演示样例如以下: 显然.为了显示查词的结果,我们必须在上图中提取实用的信息,并正确的显示出来. 上图中每一行内容的意思我已经在文章<调用网络API>中作了解释.我在词典中选择想要显示的内容有:单词本身.单词

[转]JSon数据解析的四种方式

转至http://blog.csdn.net/enuola/article/details/7903632 作为一种轻量级的数据交换格式,json正在逐步取代xml,成为网络数据的通用格式. 有的json代码格式比较混乱,可以使用此"http://www.bejson.com/"网站来进行JSON格式化校验(点击打开链接).此网站不仅可以检测Json代码中的错误,而且可以以视图形式显示json中的数据内容,很是方便. 从IOS5开始,APPLE提供了对json的原生支持(NSJSONS

最简单简洁高效的Json数据解析

一.无图无真相 二.主要代码 1.导入jar包 拷贝fastjson.jar包到projectlibs包下 2.封装工具类JsonUtil.java package com.example.parsejsondemo; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObject; import java.util.List; /**

JSON数据解析（转）

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,为Web应用开发提供了一种理想的数据交换格式. 本文将主要介绍在Android开发中,如何在服务器端创建JSON数据,以及如何在Android客户端对JSON数据进行解析. 1.JSON数据结构 在JSON中有两种数据结构:对象和数组. 1.1对象 在JSON中,一个对象以“{”(左括号)开始,“}”(右括号)结束.每个“名称”后跟一个“:”(冒号),冒号后是该名称的值,多个

【Qt编程】基于Qt的词典开发系列&lt;九&gt;--JSON数据解析

在上一篇文章<用户登录及API调用的实现>中,我通过程序实现了用户登录及API调用的实现,从而能够实现网络查词.添词的操作.但是,从上文中可以看到,调用API后返回的是JSON格式的数据,如下图所示(在QtCreator中的显示): 为了更好的观察JSON格式,我整理后显示如下: 显然,为了显示查词的结果,我们必须在上图中提取有用的信息,并正确的显示出来.上图中每一行内容的意思我已经在文章<调用网络API>中作了解释.我在词典中选择想要显示的内容有:单词本身.单词ID.中文解释.英

android开发之JSON数据解析

android开发之JSON数据解析 本博文主要讲述的是使用google的lib库gson解析JSON数据的方法,因为android自带的JSON数据解析器对只可以在android 3.0以上版本才能适用,如果需要使用gson,我们需要在项目中添加gson的lib库文件,然后add path.详细代码如下: MainActivyty.java: package com.example.analysisjson; import android.os.Bundle; import android.a

Rxjava、Retrofit返回json数据解析异常处理

每个App都避免不了要进行网络请求,从最开始的用谷歌封装的volley到再到android-async-http再到OKHttpUtils再到现在的Retrofit和RxJava,从我自己用后的体验来看,用了retrofit和RxJava真的回不去了,回不去了,不去了,去了,了-(哈哈,本来还想分析下这四个的区别,网上这样的文章很多,我就没必要多添乱了-.-).不多逼逼,下面开始正文. 1.Rxjava和Retrofit依赖导入: compile 'io.reactivex:rxandroid:

Android JSON数据解析（GSON方式）

要创建和解析JSON数据,也可以使用GSON来完成.GSON是Google提供的用来在Java对象和JSON数据之间进行映射的Java类库.使用GSON,可以很容易的将一串JSON数据转换为一个Java对象,或是将一个Java对象转换为相应的JSON数据. 1.GSON的两个重要方法 在GSON的API中,提供了两个重要的方法:toJson()和fromJson()方法.其中,toJson()方法用来实现将Java对象转换为相应的JSON数据,fromJson()方法则用来实现将JSON数据转换