如何解析html中的json数据和输出？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何解析html中的json数据和输出？相关的知识，希望对你有一定的参考价值。
我有这个json数据，我需要用它的数据替换html。
我已经尝试用.each循环遍历它，但我无法让它输出正确。
// json data variable output
{
"Topic Example Left": [
"a",
"b",
"c",
"d"
],
"Topic Example Right": [
"e",
"f",
"g",
"h",
]
}
我需要清空check-row-0和check-row-1，并用json数据替换下面的当前结果。
// topic example left div
<div id="check-row-0" class="col-sm-12 col-md-6 col-lg-6 list_column list_column_border">
<label class="informationTitle">Special Programs</label>
<div>
<label class="informationPoint"><i class="fas fa-check"></i>a</label>
</div>
<div>
<label class="informationPoint"><i class="fas fa-check"></i>b</label>
</div>
<div>
<label class="informationPoint"><i class="fas fa-check"></i>c</label>
</div>
<div>
<label class="informationPoint"><i class="fas fa-check"></i>d</label>
</div>
//topic example right div
<div id="check-row-1" class="col-sm-12 col-md-6 col-lg-6 list_column list_column_border">
<label class="informationTitle">Special Programs</label>
<div>
<label class="informationPoint"><i class="fas fa-check"></i>e</label>
</div>
<div>
<label class="informationPoint"><i class="fas fa-check"></i>f</label>
</div>
<div>
<label class="informationPoint"><i class="fas fa-check"></i>g</label>
</div>
<div>
<label class="informationPoint"><i class="fas fa-check"></i>h</label>
</div>
谢谢你的帮助！
答案
您可以迭代JSON，然后基于此生成HTML。
这是一些虚拟代码，它还没有准备好在生产中使用，因为它不好，干净，仅用于演示目的。
$(document).ready(function(){
var json = JSON.parse(`{
"left": [
"a",
"b",
"c",
"d"
],
"right": [
"e",
"f",
"g",
"h"
]
}`);
var first = $('#check-row-0');
var second = $('#check-row-1');
for(var key in json){
console.log(key);
if(key==="left"){
for(var j=0; j<json[key].length; j++){
var div = $('<div/>');
var icon = $('<i/>').addClass('fas fa-check');
var label = $('<label/>').addClass('informationPoint').text(json[key][j]);
label.append(icon);
div.append(label);
first.append(div)
}
}
else if(key==="right"){
for(var j=0; j<json[key].length; j++){
var div = $('<div/>');
var icon = $('<i/>').addClass('fas fa-check');
var label = $('<label/>').addClass('informationPoint').text(json[key][j]);
label.append(icon);
div.append(label);
second.append(div)
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="check-row-0" class="col-sm-12 col-md-6 col-lg-6 list_column list_column_border">
<label class="informationTitle">Special Programs</label>
</div>
<div id="check-row-1" class="col-sm-12 col-md-6 col-lg-6 list_column list_column_border">
<label class="informationTitle">Special Programs</label>
</div>
</div>另一答案
我建议依靠专门的js-library / frameworks，例如angular，knockoutjs等
混合标记和js是不好的做法。
查看基于knockoutjs的示例：
标记
<table>
<thead>
</thead>
<tbody>
<div id="check-row-0" class="col-sm-12 col-md-6 col-lg-6 list_column list_column_border">
<label class="informationTitle">Special Programs</label>
<div data-bind="foreach: topics.left">
<label class="informationPoint"><i class="fas fa-check" data-bind="text: $data"></i></label>
</div>
</div>
<div id="check-row-1" class="col-sm-12 col-md-6 col-lg-6 list_column list_column_border">
<label class="informationTitle">Special Programs</label>
<div data-bind="foreach: topics.right">
<label class="informationPoint"><i class="fas fa-check" data-bind="text: $data"></i></label>
</div>
</div>
</tbody>
</table>
ko.applyBindings({
topics: {
left: [
"a",
"b",
"c",
"d"
],
right: [
"e",
"f",
"g",
"h",
]
}
});
另一答案
您可以尝试遍历所有.informationPoint元素，然后附加解析后的JSON数据：
var json = JSON.parse(`{
"left": [
"a",
"b",
"c",
"d"
],
"right": [
"e",
"f",
"g",
"h"
]
}`);
var list = document.getElementsByClassName("informationPoint");
var counter = 0;
for(var a=0;a<json.left.length+1;a++){
list[a].innerHTML = '<i class="fas fa-check"></i>'+json.left[a];
counter = a;
}
for(var b=counter;b<(json.left.length+counter);b++){
list[b].innerHTML = '<i class="fas fa-check"></i>'+json.right[b-counter];
}
另一答案
我有一个类似的要求，并在Jquery中为它创建了一个代码，我当时无法找到一些插件，所以想把它公开，以便任何需要这样的东西的人都可以使用它
您可以在此链接上进行测试
https://usmanulhaq.github.io/json-editor/docs/pages/index.html?page=demo
和github页面链接如下
https://github.com/usmanulhaq/json-editor
以上是关于如何解析html中的json数据和输出？的主要内容，如果未能解决你的问题，请参考以下文章