Question

我有一个json数据样本

getClass()

我想在表格中显示field1对应的所有HTML标签，我在ajax成功时尝试了这段代码

[{
    "Field1": "<header class=\"main-header dark-bg\">\n\t\t<div class=\"row\">\n\t\t\t\t<div class=\"col-xl-3\">\n<a class=\"icons-darkbg-slogan main-header__slogan\" data-event_engagement=\"\" data-event_linktype=\"internal page link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"/\" data-event_title=\"Header Home::Slogan\" href=\"/\" target=\"_self\" title=\"DWS Homepage\"><img src=\"/globalassets/images/logos/dws_logo_global.svg\" class=\"icon-svg hide-for-print\" alt=\"dws_logo_global\"></a>\t\t\t\t</div>\n\t\t\t\t<nav class=\"col-xl-9 hide-lg main-header__group\">\n\n        <ul class=\"list-inline pipe-separator text-medium pull-right hide-for-print\">\n\n\n \n\n\n    <li class=\"\">\n        <a data-event_component_headline=\"\" data-event_component_name=\"header-navigation\" data-event_engagement=\"\" data-event_linktype=\"internal page link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"/das-unternehmen/\" data-event_title=\"Über Uns\" href=\"/das-unternehmen/\" target=\"_self\" title=\"Über Uns\" class=\"\">Über Uns</a>\n    </li>\n\n    <li class=\"\">\n        <a data-event_component_headline=\"\" data-event_component_name=\"header-navigation\" data-event_engagement=\"\" data-event_linktype=\"internal page link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"/service/\" data-event_title=\"Service\" href=\"/service/\" target=\"_self\" title=\"Service\" class=\"\">Service</a>\n    </li>\n\n    <li class=\"\">\n        <a data-event_component_headline=\"\" data-event_component_name=\"header-navigation\" data-event_engagement=\"\" data-event_linktype=\"internal page link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"/service/dws-direkt/\" data-event_title=\"DWS Direkt\" href=\"/service/dws-direkt/\" target=\"_self\" title=\"DWS Direkt\" class=\"\">DWS Direkt</a>\n    </li>\n\n    <li class=\"\">\n        <a data-event_component_headline=\"\" data-event_component_name=\"header-navigation\" data-event_engagement=\"\" data-event_linktype=\"external link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"https://depot.dws.de/\" data-event_title=\"DWS Depot Login\" href=\"https://depot.dws.de/\" target=\"_blank\" title=\"DWS Depot Login\" class=\"\">DWS Depot Login</a>\n    </li>\n\n    <li class=\"\">\n        <a data-event_component_headline=\"\" data-event_component_name=\"header-navigation\" data-event_engagement=\"\" data-event_linktype=\"internal page link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"/service/berater-welt/\" data-event_title=\"Berater\" href=\"/service/berater-welt/\" target=\"_self\" title=\"Berater\" class=\"\">Berater</a>\n    </li>\n\n    <li class=\"\">\n        <a data-event_component_headline=\"\" data-event_component_name=\"header-navigation\" data-event_engagement=\"\" data-event_linktype=\"external link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"https://dws.com/de/\" data-event_title=\"DWS Group\" href=\"https://dws.com/de/\" target=\"_blank\" title=\"DWS Group\" class=\"\">DWS Group</a>\n    </li>\n            \n\t\t\t\n        </ul>\n\n\t\t\t\t</nav>\n\t\t</div>\n\n\t\t<div class=\"space-9 hide-md\"></div>\n\t</header>"
  }]

output screenshot

我使用过.text（），$ .parsejson和json.stringify（）但无法获得输出。请帮帮我。检查图像以供参考

Answer 1

您提供的代码段不足以让我们提供解决方案，但在我看来，我认为您可以使用

//Value return from XML HttpRequest
var fieldArr = JSON.parse(returnValue);
var field1 = fieldArr[0].Field1;

Answer 2

您可以使用document.createElement创建tr和td，然后在不使用HTMLElement

将其解析为.innerText的情况下附加您的文字

＆＃13;

var html = '<table border="1">';
var mainObject = [{"Field1":"<div class=\"row\">something else here</div>"}]
html += '<tr>'
html += '<th id="keypress">KEY</th>';
html += '<th>VALUE</th>';
html += '</tr>';

for (var key in mainObject) {
  var innerObject = mainObject[key];
  for (var innerKey in innerObject) {
    var t = innerObject[innerKey];
    var ud = $(t).attr('class');
    
    var row = document.createElement('tr');
    
    var col1 = document.createElement('td');
    col1.innerText = innerKey;
    row.appendChild(col1);
    
    var col2 = document.createElement('td');
    col2.innerText = t;
    row.appendChild(col2);
    
    html += $(row).html();
  }
}
html += '</table>';
var displayResources = $('#displayResources');
displayResources.html(html);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="displayResources"></div>

＆＃13;

或者只是转义<和>

＆＃13;

var html = '<table border="1">';
var mainObject = [{"Field1":"<div class=\"row\">something else here</div>"}]
html += '<tr>'
html += '<th id="keypress">KEY</th>';
html += '<th>VALUE</th>';
html += '</tr>';

for (var key in mainObject) {
  var innerObject = mainObject[key];
  for (var innerKey in innerObject) {
    var t = innerObject[innerKey];
    var ud = $(t).attr('class');
    
    html += '<tr>';
    var t = innerObject[innerKey];
    var ud = $(t).attr('class');

    html += '<td>' + innerKey + '</td>';
    html += '<td>' + t.replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</td>';
    html += '</tr>';
  }
}
html += '</table>';
var displayResources = $('#displayResources');
displayResources.html(html);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="displayResources"></div>

＆＃13;

如何从json打印精确的html标签

2 个答案: