How to Serialize and Deserialize an XMLDocument in Javascript?

Question

I am getting error on document.adoptNode as 'parameter1 is not valid node'.

Below is my code.

 $.ajax({

     type: "GET",
     url: url,
     datatype: "xml",
     success: function (results) {
         //results is a XMLDocument type object which contains a SVG information
         console.log(results);
         //need to serialize results to store it in localStorage

         localStorage.setItem('results', JSON.stringify(results));

         var results2 = JSON.parse(localStorage.getItem('results'));

         var svgnode = $('svg', results);

         var origwidth = svgnode.attr('width');

         var origheight = svgnode.attr('height');

         var docnode = document.adoptNode(svgnode[0]);
     }

 });

I need serialization and deserialization to store it in localStorage. How can i serialize and deserialize XMLDocument?

hi if your results is xml only could you try not to JSON.stringify and JSON.parse the xml and use it direct..its for JSON not xml ..you will get parsing error — kunal verma, Jan 03 '20 at 08:09

score 2 · Answer 1 · answered Jan 03 '20 at 08:12

XML has its own text format, I wouldn't use JSON for the serialization/deserialization, I'd use XML.

In your ajax call, you're asking jQuery to deserialize the XML text received for you. But since you want to use that text, I'd change dataType to "text" so you receive a string with the XML in it. Then store that in localStorage and parse it when you need an XMLDocument instead of a string.

Something along these lines:

$.ajax({
     type: "GET",
     url: url,
     datatype: "text",
     success: function(results) {
         // `results` is a string
         localStorage.setItem('results', results);
         // No need to re-get it, you already have it in `results`; parse it
         var results2 = new DOMParser().parseFromString(results, "text/xml");
         var svgnode = $('svg', results);
         var origwidth = svgnode.attr('width');
         var origheight = svgnode.attr('height');
         var docnode = document.adoptNode(svgnode[0]);
     }
});

Or you can parse it with jQuery instead:

$.ajax({
     type: "GET",
     url: url,
     datatype: "text",
     success: function(results) {
         // `results` is a string
         localStorage.setItem('results', results);
         // No need to re-get it, you already have it in `results`; parse it
         var svgnode = $.parseXML(results);
         var origwidth = svgnode.attr('width');
         var origheight = svgnode.attr('height');
         var docnode = document.adoptNode(svgnode[0]);
     }
});

If you ever need to go from an XMLDocument to a string again, you can do that like this:

var xmlString = new XMLSerializer().serializeToString(xmlDocument);

changing datatype to text from xml not changing results to string. Still i am facng issues. — Mahesh, Jan 03 '20 at 17:28

How to Serialize and Deserialize an XMLDocument in Javascript?

1 Answers1