CODEWITHSUNDEEP
jqueryxmljsonxml-parsingnodelist
Amanni
Amanni

Reputation: 1934

How to parse a XML converted to JSON

I have get an xml file from a WebService 

<MasterProducts> <MasterProduct> <Productcode>023DDC</Productcode> <Description>Dell CRT 17 Computer Monitor E771a</Description> <ThumbPic>NoImage.png</ThumbPic> <RRP>0.000000</RRP> <Stock>2</Stock> </MasterProduct> </MasterProducts>

The Chrome IDE I use automatically converts this to JSON, I've been trying to parse this without any success as I am quite new to Javascript.

The httpResponse returns an error variable and a data variable which holds the json file.

if(error===false)
{ 
    if(data !== '')
    { 
        objData = data.getElementsByTagName('MasterProducts');
        //returns a NodeList here
        var items = objData[0].getElementsByTagName('MasterProduct')[0].getElementsByTagName('Description')[0].firstChild.data;

    }
    else
    { 
        alert("No Data"); 
    } 
}

I have only gone as far as getting the nodelist but I haven't been able to get the data I need from the tags.

EDIT: Using an online converter I've gotten the JSON below

{
   "MasterProducts": {
      "MasterProduct": {
  "Productcode": "023DDC",
  "Description": "Dell CRT 17 Computer Monitor E771a",
  "ThumbPic": "NoImage.png",
  "RRP": "0.000000",
  "Stock": "2"
      }
  }
 }

Upvotes: 0

Views: 839

Answers (3)

Justin Bicknell
Justin Bicknell

Reputation: 4798

You can store your xml directly in a jQuery obj without adding it to the dom, like the other answer says. 

var $xml = $(data);

Then simply use jQuery to target specific elements, avoid using getElementsByTagName, as it is only available in certain browsers.

var MasterProducts = [];

$xml.find('MasterProduct').each(function(){
   var $masterProduct = $(this);
   var masterProduct = {};
   $masterProduct.find('*').each(function(){
      masterProduct[$(this).get(0).tagName] = $(this).text();
   });
   MasterProducts.push(masterProduct);
});

In the end your MasterProducts array should contain a JavaScript object which you can then convert to JSON with the following call.

var json = JSON.stringify(MasterProducts);

I put this on jsFiddle. See http://jsfiddle.net/WRF4D/

Upvotes: 0

Robb Edge
Robb Edge

Reputation: 91

The JSON you're getting back is valid, according to http://jsonlint.com/, so your script should be able to access the contents of data using dot notation, rather than having to parse nodes as with XML 

var data ={
            "MasterProducts": {
                "MasterProduct": {   
                    "Productcode": "023DDC",
                    "Description": "Dell CRT 17 Computer Monitor E771a",
                    "ThumbPic": "NoImage.png",
                    "RRP": "0.000000",
                    "Stock": "2"
                 }   
             }  
         }

 var description = data.MasterProducts.MasterProduct.Description;

description will contain "Dell CRT 17 Computer Monitor E771a"

Upvotes: 1

Paul Knopf
Paul Knopf

Reputation: 9776

The data seems to be a type of string. "getElementsByTagName" is only available (in some browsers) on the dom element and the dom itself. Try adding your response to a hidden div and query it using jQuery.

$("#hidden").html(data);

Then query that div using jquery or you can use the dom directly as you are trying to do.

$("#hidden").find("MasterProducts")[0].getElementsByTagName("MasterProduct")

Upvotes: 0

Related Questions