How to Print XML content using JavaScript or JQuery

Question

I am trying to print XML content in a table using jQuery. This comes blank in table.

data[i].xml_details contains the XML content. I am getting blank display while try printing in table. where as console.log('XML Details' + data[i].xml_details); prints XML content without any issues.

success: function(data) {
  // remove all Row items in table, before adding new rows
  $('table.others_list tbody tr').remove();
  for (var i in data) {
    var xml = $.parseXML(data[i].xml_details);
    var newRow = jQuery('<tr><td class="col-sm-2"> <div>' +
      data[i].request_type +
      '</div> </td> <td style="display:none;">' +
      data[i].rels_others_id +
      '</td>' +
      '<td class="col-sm-2">' +
      data[i].xml_details +
      '</td>' +
      ' <td class="col-sm-2">' + data[i].request_details + '</td>' +
      ' <td class="col-sm-1">' +
      '<a href="#"  class="delete-esb" onclick="deleteOthersRow(this);">' +
      '<i class="fa fa-trash-o" "> </i> </a>' +
      '</td></tr>');
    jQuery('table.others_list').append(newRow);
    console.log('XML Details' + data[i].xml_details);
  }

Answer 1

Extract text content from the parsed XML data. Then construct text string and insert it to the table.

for (var i in data) {
    var xml = $.parseXML(data[i].xml_details);

    var xmlContent = [];
    // Search for the title and content of xml tags
    $(xml).find('*').each(function(){
        if ($(this).children().length == 0) {
            xmlContent.push($(this).prop("tagName") + ': ' + $(this).text());
        }
    });
    var textString = xmlContent.join(', ');

    var newRow = jQuery('<tr><td class="col-sm-2"> <div>' +
        data[i].request_type +
        '</div> </td> <td style="display:none;">' +
        data[i].rels_others_id +
        '</td>' +
        '<td class="col-sm-2">' +
        textString +
        '</td>' +
        ' <td class="col-sm-2">' + data[i].request_details + '</td>' +
        ' <td class="col-sm-1">' +
        '<a href="#"  class="delete-esb" onclick="deleteOthersRow(this);">' +
        '<i class="fa fa-trash-o" "> </i> </a>' +
        '</td></tr>');
    jQuery('table.others_list').append(newRow);
    console.log('XML Details' + data[i].xml_details);
}

2nd variant . To print XML string as is, replace special HTML characters in data[i].xml_details with their &-named equivalents:

function escapeHtml(text) {
  return text
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;");
}

...

for (var i in data) {
    var xml = $.parseXML(data[i].xml_details);
    var newRow = jQuery('<tr><td class="col-sm-2"> <div>' +
        data[i].request_type +
        '</div> </td> <td style="display:none;">' +
        data[i].rels_others_id +
        '</td>' +
        '<td class="col-sm-2">' +
        escapeHtml(data[i].xml_details) +
        '</td>' +
        ' <td class="col-sm-2">' + data[i].request_details + '</td>' +
        ' <td class="col-sm-1">' +
        '<a href="#"  class="delete-esb" onclick="deleteOthersRow(this);">' +
        '<i class="fa fa-trash-o" "> </i> </a>' +
        '</td></tr>');
    jQuery('table.others_list').append(newRow);
    console.log('XML Details' + data[i].xml_details);
}