CODEWITHSUNDEEP
extjsextjs6.5.1
user177800
user177800

Reputation:

How to configure a store to read a raw array of numbers from an ajax/rest call?

I am trying to figure out how to configure a Store to read in a raw JSON array of numbers from a GET request via an AjaxProxy.

It demands Please associate a Model with the store, or add one or more Fields to the store. I do not have a model and there are no fields, it is just a raw JSON array. The ArrayStore does not seem to be the correct thing either, as it is looking for an array of arrays from what the documentation says.

Here is an example of the JSON that the GET request returns:

[1,2,3,4,5,6,7,8,9,10]

These numbers represent unique ids in a system, not that that really matters.

I have never tried to do this before, I have had no problems when the response is an array of JSON objects or a JSON object with fields.

Here is how far I have gotten:

Ext.define('fivestar.store.NumberStore', {
    extend: 'Ext.data.Store',

    requires: [
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'NumberStore',
            proxy: {
                type: 'ajax',
                reader: {
                    type: 'json'
                }
            }
        }, cfg)]);
    }
});

I have read through the documentation, searched far and wide and I only found one answer that says to transform the data and add a field. I also found this but it does not have enough code to explain how to use the answer. Is there any other way that is not so heavy?

What am I missing?

Upvotes: -2

Views: 418

Answers (1)

Evan Trimboli
Evan Trimboli

Reputation: 30082

You can use the transform method to promote the raw data into objects:

Ext.define('MyStore', {
    extend: 'Ext.data.Store',

    proxy: {
        type: 'ajax',
        url: 'data1.json',
        reader: {
            type: 'json',
            transform: raw => raw.map(v => ({ id: v }))
        }
    }
});

var s = new MyStore();
s.load(() => {
    console.log(s.getRange().map(r => r.id));
});

Fiddle here.

Upvotes: 3

Related Questions