如何解析html中的json数据和输出？

Question

我有这个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>

谢谢你的帮助！

Answer 1

您可以迭代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>

Answer 2

我建议依靠专门的js-library / frameworks，例如angular，knockoutjs等

混合标记和js是不好的做法。

查看基于knockoutjs的示例：

jsFiddle working example

标记

<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>

JavaScript的

ko.applyBindings({
    topics: {
        left: [
            "a",
            "b",
            "c",
            "d"
        ],
        right: [
            "e",
            "f",
            "g",
            "h",

        ]
    }
});

Answer 3

您可以尝试遍历所有.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];
}

Answer 4

我有一个类似的要求，并在Jquery中为它创建了一个代码，我当时无法找到一些插件，所以想把它公开，以便任何需要这样的东西的人都可以使用它

您可以在此链接上进行测试

https://usmanulhaq.github.io/json-editor/docs/pages/index.html?page=demo

和github页面链接如下

https://github.com/usmanulhaq/json-editor