How to display string having XML data

Question

My JSON data is:

[
    {
        "serviceName":"test",
        "requestXML":"<soapenvelope><uname>testuser</uname></soapenvelope>"
    },
    {
        "serviceName":"test2",
        "requestXML":"<soapenvelope><uname>testuser2</uname></soapenvelope>"
    } 
]

jQuery code to call to backend which returns this JSON data

var postRequest = $.post(url);

postRequest.done(function( data ) {

      $('#tableid').dataTable( {
         "processing": true,
          destroy: true,
          "aaData": data,
          "aoColumns": [
                { "data": "serviceName" },
                { "data": "requestXML" },
          ]
      });     
});

Now when it is shown on the screen as jQuery DataTable, I wanted the entire XML to be printed as it. But it just prints testuser instead of the whole XML.

Could anyone please help me with this as what is going wrong?

I have verified my JSON data is going correctly.

Because the web page parses it as (invalid) HTML and prints the text. — lshettyl, Sep 28 '15 at 14:59
In JSP :

SERVICE NAME REQUEST XML

SERVICE NAME REQUEST XML — V Joe, Sep 28 '15 at 15:02
Ok, this is the strcture, but how are you entering the data to those fields? via `innerHTML`? — sailens, Sep 28 '15 at 15:04
No, the jquery code posted above automatically does it. I dont have to write any other code for this. $('#tableid').dataTable. Using the tableid mapped with the HTML structure. It does the work — V Joe, Sep 28 '15 at 15:06

score 4 · Accepted Answer · answered Sep 28 '15 at 15:20

SOLUTION

You can use $('<div/>').text(data).html() trick to encode HTML entities.

For example:

$('#tableid').dataTable({
    "processing": true,
    "destroy": true,
    "data": data,
    "columns": [
       { 
          "data": "serviceName" 
       },
       { 
          "data": "requestXML",
          "render": function(data, type, full, meta){
              return $('<div/>').text(data).html();
          }
       }
    ]
});

DEMO

See this jsFiddle for code and demonstration.

Super! You made my day! Thanks! – V Joe Sep 28 '15 at 15:24 — V Joe, Sep 28 '15 at 15:24

score 0 · Answer 2 · edited May 23 '17 at 11:51

Your server should take care of the response what it is sending. instead of sending

[
{"serviceName":"test","requestXML":"<soapenvelope><uname>testuser</uname></soapenvelope>"},
 {"serviceName":"test2","requestXML":"<soapenvelope><uname>testuser2</uname></soapenvelope>"} 
]

it should send something like below

[
    {"serviceName":"test","requestXML":"&lt;soapenvelope&gt;&lt;uname&gt;testuser&lt;/uname&gt;&lt;/soapenvelope&gt;"},
     {"serviceName":"test2","requestXML":"&lt;soapenvelope&gt;&lt;uname&gt;testuser2&lt;/uname&gt;&lt;/soapenvelope&gt;"} 
    ]

If that is not possible ( you don't control the server ) then the following link should help Escape markup in JSON-driven jQuery datatable?

score 0 · Answer 3 · answered Sep 28 '15 at 15:08

First of all you will need XML escaping function (taken from here):

var XML_CHAR_MAP = {
  '<': '&lt;',
  '>': '&gt;',
  '&': '&amp;',
  '"': '&quot;',
  "'": '&apos;'
}

function escapeXml (s) {
  return s.replace(/[<>&"']/g, function (ch) {
    return XML_CHAR_MAP[ch]
  })
}

Then you can render cell content using it:

{
  data: "requestXML",
  render: function(data, method, object, pos) {
    return '<pre>' + escapeXml(data) + '</pre>'
  }
}

Now your XML should be visible. Remove pre tags, if not required.

I tried to use this method. Getting s.replace is not a function. Any clue? — V Joe, Sep 28 '15 at 15:21

How to display string having XML data

3 Answers3