如何显示具有XML数据的字符串

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.

Answer 1

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.

Answer 2

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":"<soapenvelope><uname>testuser</uname></soapenvelope>"},
     {"serviceName":"test2","requestXML":"<soapenvelope><uname>testuser2</uname></soapenvelope>"} 
    ]

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

Answer 3

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.