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
– lshettyl, Commented Sep 28, 2015 at 14:59
In JSP : <table id="tableid" class="display" width="100%"> <thead> <tr> <th>SERVICE NAME</th> <th>REQUEST XML</th> </tr> </thead> <tbody class="alignCenter"> </tbody> <tfoot> <tr> <th>SERVICE NAME</th> <th>REQUEST XML</th> </tr> </tfoot> </table> — V Joe
– V Joe, Commented Sep 28, 2015 at 15:02
Ok, this is the strcture, but how are you entering the data to those fields? via innerHTML? — sailens
– sailens, Commented Sep 28, 2015 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
– V Joe, Commented Sep 28, 2015 at 15:06

Gyrocode.com · Accepted Answer · 2015-09-28 15:20:51Z

4

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.

answered Sep 28, 2015 at 15:20

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

V Joe Over a year ago

Super! You made my day! Thanks!

Community · Accepted Answer · 2017-05-23 11:51:47Z

0

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?

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Sep 28, 2015 at 15:06

Abhiram mishra

1,6172 gold badges16 silver badges35 bronze badges

Comments

dimakura · Accepted Answer · 2015-09-28 15:08:58Z

0

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.

answered Sep 28, 2015 at 15:08

dimakura

7,65519 silver badges38 bronze badges

1 Comment

V Joe Over a year ago

I tried to use this method. Getting s.replace is not a function. Any clue?

Collectives™ on Stack Overflow

How to display string having XML data

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related