Results 1 to 3 of 3

Thread: Combine 2 jsons from 2 endpoints into one Store

  1. #1
    Sencha User
    Join Date
    May 2017
    Posts
    1

    Default Combine 2 jsons from 2 endpoints into one Store

    I have 2 endpoints, and each of them returns a JSON (actually 3 but let's make it simple). I can't combine them on the server side because I don't have access to it.

    I need to display the data in an Ext.grid.Panel which accepts only one Store object. I tried making a model for each JSON and then somehow combining them, but I failed. So I'm thinking of joining them with a where clause, and I need to match the id from one JSON to bar_id from another JSON. For example like this:

    Code:
    { "success": true,
          "total": 3,
          "message": "Data loaded",
          "data": [
                         {"id": "1", "object_name": "foo1", "bar_id": 1},
                                         {"id": "2", "object_name": "foo2", "bar_id": 2},
                                         {"id": "3", "object_name": "foo3", "bar_id": 3}
                     ]
        }
    And the other one:

    Code:
    { "success": true,
          "total": 5,
          "message": "Data loaded",
          "data": [
                         {"id": "1", "bar_name": "bar1"},
                         {"id": "2", "bar_name": "bar2"},
                         {"id": "3", "bar_name": "bar3"}
                      ]
        }
    And I want to combine them like this:

    Code:
    [
          {"id": "1", "object_name": "foo1", "bar_id": 1, "bar_name": "bar1"},
          {"id": "2", "object_name": "foo2", "bar_id": 2, "bar_name": "bar2"},
          {"id": "3", "object_name": "foo3", "bar_id": 3, "bar_name": "bar3"}
        ]
    So I need something like: where FirstModel.bar_id equals SecondModel.id. Then I need to make a Store from this JSON. As you can see, I'm just starting with Ext JS.

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    48
    Answers
    1

    Default

    I made a similar approach, but I've put all inside a single model, then on store's load I made the call to the second endpoint, filling the missing fields.

    Something like that:
    Code:
    Ext.define('MixedData', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'id', type: 'int'},
            {name: 'key', type: 'string'},//common field on both endpoints
            //first endpoint fields
            [...]
            //second endpoint fields
            [...]
        ]
    });
    
    Ext.create('Ext.data.Store', {
        model: 'MixedData',
        storeId: 'mixer',
        proxy: {
            type: 'ajax',
            url: '<first endpoint url>',
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        },
        listeners: {
            load: function(store, records, successful, operation, options) {
                var iIndex = 0,
                    aKeys = [];
    
                if(records) {
                    for(; iIndex < records.length; iIndex++) {
                        Ext.Array.include(aKeys, records[iIndex].get('key'));
                    }
    
                    //launch max 10000 ids at time
                    while(aKeys.length > 0) {
                        Ext.Ajax.request({
                            url: '<second endpoint url>',
                            method: 'POST',
                            params: {
                                lavorazioni: Ext.Array.splice(aKeys, 0, 10000).join(',')
                            },
    
                            success: function(response, opts) {
                                var store = Ext.getStore('mixer'),
                                    obj = Ext.decode(response.responseText),
                                    records = obj ? obj.data : false,
                                    i = 0;
    
                                if(records) {
                                    for(; i < records.length; i++) {
                                        store.query('key', records[i].key).each(function(model) {
                                            model.set({
                                                field1: records[i].field1,
                                                [...]
                                                fieldN: records[i].fieldN
                                            });
                                        });
                                    }
                                }
                            },
    
                            failure: function(response, opts) {
                                Ext.toast('server-side failure with status code ' + response.status);
                            }
                        });
                    }
                }
            }
        }
    });

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    There's nothing in the framework to make this easy. If it were me, I would consider a server script that requests your JSON and presents it properly combined to the store.

Similar Threads

  1. How to override REST endpoints?
    By wardrop in forum Ext: Q&A
    Replies: 5
    Last Post: 16 Jan 2018, 9:29 AM
  2. Combine two store / send two store data in Ajax
    By gmprakashlivingstone in forum Ext 5: Q&A
    Replies: 1
    Last Post: 9 Jun 2015, 1:40 PM
  3. Nested Models, JSONs again...
    By linuxod in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 18 Sep 2014, 4:27 AM
  4. Replies: 1
    Last Post: 27 Jun 2012, 4:47 AM
  5. Difference between JSONs
    By rvent in forum Ext 2.x: Help & Discussion
    Replies: 16
    Last Post: 22 Jun 2008, 2:37 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •