CODEWITHSUNDEEP
javascriptajaxxmlextjs
David
David

Reputation: 4281

How to get Xml data by using ajax

I am trying to get my xml data by using ajax call. But I am getting only ROOT Node value data in my result.responseXML. Not able to access ITEM tag data.

My XML. 

<ROOT UN="ABC" Total="28">
    <ITEM Val = "1" data = "name1" />
    <ITEM Val = "2" data = "name2" />
    <ITEM Val = "3" data = "name3" />
    <ITEM Val = "4" data = "name4" />
    <ITEM Val = "5" data = "name5" />
</ROOT>

Here is what I am trying. 

Ext.Ajax.request({
        url : url,
        method: 'GET',
        success: function ( result, request )
            { 
               debugger;
                result.responseXML
            }
    });

In responseXML I am getting <ROOT UN="ABC" Total="28" ></ROOT>

Can Anybody help me what I am doing wrong and how to coorrect that. How to get Item tag also.

Upvotes: 0

Views: 614

Answers (1)

Joris Heus
Joris Heus

Reputation: 221

In Ext js, the best way to read xml data is to use a store.

  1. Create a store and define the fields (the mapping property (@Val) is used to indicate this is an attribute instead of a child element);
  2. Use an ajax proxy to load the data;
  3. Use an xml reader to read the data. In Ext js 6, you define the name of the root element and name of the elements you want to obtain;
  4. Load the store and show the value of the first element in the console.
var itemStore = Ext.create('Ext.data.Store', {
    fields: [{name: 'val', mapping: '@Val'}, 
        {name: 'data', mapping: '@data'}],
    proxy: {
        type: 'ajax',
        url: 'data1.xml',
        method: 'GET',
        reader: {
            type: 'xml',
            record: 'ITEM',
            rootProperty: 'ROOT'
        }
    }
});

itemStore.load(function(records, operation, success) {
    var item1 = itemStore.first();
    console.log("First item " + item1.get('val'));
});

Check the fiddle here: https://fiddle.sencha.com/#view/editor&fiddle/1vd6

Upvotes: 3

Related Questions