ExtJS grab JSON result

Question

I'm generating JSON response from PHP witch looks like this:

{ done:'1', options: [{ message:'Example message'},{message:'This is the 2nd example message'}]}

I want to grab these results using ExtJS. This is what I have so far:

Ext.Ajax.request({
    loadMask: true,
    url: 'myfile.php',
    params: {id: "1"}
});

What do I have to write next to get the json results like this:

var mymessages = jsonData.options;

And mymessages should contain Example message and This is the 2nd example message.

Thank you.

Rene Saarsoo · Accepted Answer · 2009-06-03T14:56:33.907

35

The straightforward approach:

Ext.Ajax.request({
  loadMask: true,
  url: 'myfile.php',
  params: {id: "1"},
  success: function(resp) {
    // resp is the XmlHttpRequest object
    var options = Ext.decode(resp.responseText).options;

    Ext.each(options, function(op) {
      alert(op.message);
    }
  }
});

Or you could do it in a more Ext-ish way using Store:

var messages = new Ext.data.JsonStore({
  url: 'myfile.php',
  root: 'options',
  fields: [
    {name: 'text', mapping: 'message'}
  ],
  listeners: {
    load: messagesLoaded
  }
});
messages.load({params: {id: "1"}});

// and when loaded, you can take advantage of
// all the possibilities provided by Store
function messagesLoaded(messages) {
  messages.each(function(msg){
    alert(msg.get("text"));
  });
}

One more example to address the last comment:

var messages = [{title: "1"},{title: "2"},{title: "3"}];

var titles = msg;
Ext.each(messages, function(msg){
  titles.push(msg.title);
});
alert(titles.join(", "));

Although I would prefer doing it with a Array.map (which isn't provided by Ext):

var text = messages.map(function(msg){
  return msg.title;
}).join(", ");
alert(text);

edited Jun 03 '09 at 14:56

answered Jun 03 '09 at 13:56

Rene Saarsoo

13,580
8
57
85

It works but I need to access all messages from the options "category". I can do a jsonData.done and I get "1" as a response witch is good but how would I grab all "message" texts ? – Manny Calavera Jun 03 '09 at 14:07
Thanks, works great! On more thing, if I may: how can I gather all messages and show them in Ext.Msg.alert ? – Manny Calavera Jun 03 '09 at 14:39
I get a "messages.map is not a function" error on the Array.map example by Firebug. Is there something I'm missing ? Thanks and sorry for the mess, but I'm a beginner. – Manny Calavera Jun 03 '09 at 15:23
As I sayd, map() is not provided by Ext. But you can use some library that defines it, like ext-basex: http://code.google.com/p/ext-basex/ – Rene Saarsoo Jun 03 '09 at 15:47
Late, question, please! Is there any chance now to grab the value of "done" from JSON ? I mean in the same JsonStore. Basically, I need to know if(done == "1") or done == "0". Thanks. – Manny Calavera Jun 03 '09 at 16:05
You can access it through store.reader.jsonData.done. Although that's quite hackish way to do it. Maybe in your case it would be better to use Ajax.reques(). I don't really know. You could investigate things like JsonReader.successProperty and Store.loadexception. – Rene Saarsoo Jun 03 '09 at 20:40
Thank you! It works. What do you mean by "quite hackish" ? What can happen using this method ? It's not safe ? – Manny Calavera Jun 04 '09 at 01:59
The reader property of Store is not documented. So relying on that is not future-proof. – Rene Saarsoo Jun 04 '09 at 08:03

Kevin · Answer 2 · 2010-08-19T18:00:07.503

6

Use the success and failure properties:

Ext.Ajax.request({
    loadMask: true,
    url: 'myfile.php',
    params: {id: "1"},
    success: function(response, callOptions) {
       // Use the response
    },
    failure: function(response, callOptions) {
       // Use the response
    }
});

See the Ext API docs for more details

edited Aug 19 '10 at 18:00

answered Jun 03 '09 at 13:56

Kevin

30,111
9
76
83

Mrigesh Raj Shrestha · Answer 3 · 2012-06-12T11:32:00.773

2

check this sample fiddle which is for Ext JS 4. http://jsfiddle.net/mrigess/e3StR/

Ext 4 onward utilizes Ext.JSON.encode() and Ext.JSON.decode() ; while Ext 3 uses Ext.util.JSON.encode() and Ext.util.JSON.decode()

edited Jun 12 '12 at 11:32

answered Jun 12 '12 at 11:02

Mrigesh Raj Shrestha

580
3
16

score 1 · Answer 4 · answered Jun 03 '09 at 14:15

if you are sure that your input is correct (beware of xss attacks) you can use the eval() function to make your javascript object from your json result, which can then be accessed through your command:

var mymessages = jsonData.options;

But then again, Ext does that nicely for you, as Rene has pointed out through the Ext.decode function

ExtJS grab JSON result

4 Answers4