PDA

View Full Version : Load a VERY SIMPLE string array in store



jksuf
16 Feb 2015, 2:19 AM
Hi guys,

I have a back end service that gives me an object which only contains an array of string.
This is for example what the service gives me:


{
"DepartementsResult": [
"AME-CM",
"BMAU",
"BMKR",
"BNVS"
]
}

So to get this data I want to create a nice and simple store, but a first problem appear: what should be the field???


var store = Ext.create('Ext.data.Store', {
fields: ['data'], // What should be the fields here, I have none ^^"
pageSize: 0,
autoLoad: false,
proxy: {
type: 'ajax',
url: 'data.json', // this file contains the data described above
reader: {
type: 'json',
rootProperty: 'DepartementsResult'
}
}
});

And then when I want to create a combo using this store I don't know what I should write also:


var combo = Ext.create('Ext.form.field.ComboBox', {
store: store,
displayField: 'data', // what field should be displayed ^^" ?
valueField: 'data', // same here I don't really know what to write
fieldLabel: 'Departements',
renderTo: Ext.getBody()
});

Here is the link https://fiddle.sencha.com/#fiddle/iau to the sencha fiddle with the code described bellow ;) ! Thanks a lot !!

dylanvdb
16 Feb 2015, 3:42 AM
Hi,Don't have a lot of experience with ExtJS but a quick look at the fiddle, could you maybe alter the way how your service returns the data?Because with surrounding each string with brackets works for me. Like this:
{ "DepartementsResult": [ ["AME-CM"], ["BMAU"], ["BMKR"], ["BNVS"], ["BSLGJ"], ["BSLM2"], ["BSV"], ["CAM"], ["CCDA"], ["CCDA1"], ["CCDA2"], ["CCDG"], ["CCDGA"], ["CCDGO"], ["CCDGS"], ["CCDGT"], ["CCDO"], ["CCDOA"], ["CCDOP"], ["CCDOT"], ]}

jksuf
16 Feb 2015, 4:15 AM
Hi dylanvdb, thanks a lot for your answer =) ! The point is that I can't modify the string returned by the server ^^"

jksuf
19 Feb 2015, 12:28 AM
The kind Digigizmo gave me a very clear answer on stackoverflow (http://stackoverflow.com/questions/28539182/extjs-5-load-a-very-simple-string-array-in-store/28593300#28593300), let me share it with you :) :

Basically when I define fields in my store, the store except an array of objects which properties will match the fields. For example if I have a store like this:


Ext.define('Ext.data.Store', {
fields: ['name'],
....
});


The expected data would have this format:


[{'name': 'michel'}, {'name': 'jean'}, ...]


To parse the data returned by the server before it is parse by the store, I can use the transform method of the proxy reader, just like this:


var store = Ext.create('Ext.data.Store', {
fields: ['name'],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
transform: function(data){
data = data.map(function(val){
return { name: val };
});
return data;
}
}
}
});


Thanks again to Digigizmo ;) !

Nux
10 Apr 2017, 4:58 AM
Just remember `.map` doesn't work in IE8, so you should probably use a loop like:


transform: function(data){
var objectsData = [];
for (var i = 0; i < data.length; i++) {
objectsData.push({ name: data[i] });
}
return objectsData;
}


Also note that `rootProperty` doesn't apply here. So if data from your server looks like this:

{
"DepartementsResult": [
"AME-CM",
"BMAU",
"BMKR",
"BNVS"
]
}


Then the loop would be:


for (var i = 0; i < data.DepartementsResult.length; i++) {
objectsData.push({ name: data.DepartementsResult[i] });
}