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

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

我建议依赖于专门的js库/框架，例如angular，knockoutjs等

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

请参见基于基因敲除的示例：

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

您可以遍历JSON，然后基于该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 4

我曾经有一个类似的要求，并在Jquery中为其创建了一个代码，当时我找不到任何插件，因此考虑将其公开，以便其他需要此类插件的人都可以使用

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

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

和github页面链接如下

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

如何解析json数据并以html输出？

4 个答案: