ExtJS grab JSON result

Question

Hello. 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.

Answer 1

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);

Answer 2

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

Answer 3

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

Answer 4

Thank you so much Manny. My problem is solved

                       ---- Pramod