如何根據JSON響應動態構建以下HTML

Question

我從后端收到此JSON。 JSON是包含兩個元素的數組

{
  "animal_Details": [{
    "animal_id": "4",
    "animal_name": "Lion",
    "Tag_Details": [{
      "Tag_name": "Herbivorous"
    }, {
      "Tag_name": "Omnivorous"
    }],
    "Level_Details": [{
      "level_id": "Food",
      "animal_timer": "12",
      "animal_reps": "0",
      "animal_points": "0"
    }, {
      "level_id": "Lives",
      "animal_timer": "0",
      "animal_reps": "20",
      "animal_points": "70"
    }, {
      "level_id": "Threats",
      "animal_timer": "0",
      "animal_reps": "0",
      "animal_points": "0"
    }]
  }, {
    "animal_id": "6",
    "animal_name": "Hen",
    "Tag_Details": [{
      "Tag_name": "Carnivorous"
    }, {
      "Tag_name": "Herbivorous"
    }, {
      "Tag_name": "Omnivorous"
    }],
    "Level_Details": [{
      "level_id": "Food",
      "animal_timer": "0",
      "animal_reps": "3",
      "animal_points": "15"
    }, {
      "level_id": "Lives",
      "animal_timer": "0",
      "animal_reps": "0",
      "animal_points": "0"
    }, {
      "level_id": "Threats",
      "animal_timer": "0",
      "animal_reps": "0",
      "animal_points": "0"
    }]
  }]
}

對於上述JSON中的每個元素，我正在嘗試創建以下HTML

<div class="portlet light bordered">
      <div class="portlet-title">
         <div class="caption"><span class="caption-subject font-green sbold uppercase">Lion</span></div>
         <div class="actions"><a href="#" class="btn btn-sm btn-danger"><i class="icon-pencil"></i> Delete</a></div>
      </div>
      <div class="portlet-body" style="padding-top:0px;">
         <div class="tags-body videolist-tags-body">
            <table class="table">
               <tbody>
                  <tr>
                     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox">Herbivorous <span></span></label></td>
                     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox">Omnivorous<span></span></label></td>
                  </tr>
               </tbody>
            </table>
         </div>
         <div class="timerContainer">
            <table class="table">
               <tr>
                  <th width="14%"></th>
                  <th width="28.6%" align="left">Food</th>
                  <th width="28.6%" align="left">Lives</th>
                  <th width="28.6%" align="left">Threats</th>
               </tr>
               <tr>
                  <td style="padding:0px;">A</td>
                  <td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
                  <td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
                  <td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
               </tr>
               <tr>
                  <td style="padding:0px;">B</td>
                  <td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
                  <td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
                  <td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
               </tr>
               <tr>
                  <td style="padding:0px;">C</td>
                  <td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
                  <td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
                  <td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
               </tr>
            </table>
            <br>
            <button type="submit" class="btn btn-success" style="margin-left:92px;">Submit</button>
         </div>
      </div>
   </div>

我能夠解析JSON，如下所示，但我無法構造所需的html

  var valuesfromjson = json.animal_Details;

for (var i = 0; i < valuesfromjson.length; i++) {
    var animal_id = valuesfromjson[i].animal_id;
    var animal_name = valuesfromjson[i].animal_name;
    var animaltagsinnerarray = valuesfromjson[i].Tag_Details;
    var leveldetailsinnerarray = valuesfromjson[i].Level_Details;

    console.log('animaltagsinnerarray  ' +JSON.stringify(animaltagsinnerarray));
    console.log('leveldetailsinnerarray ' +JSON.stringify(leveldetailsinnerarray));

}

您能否讓我知道如何動態構建HTML

http://jsfiddle.net/cod7ceho/195/

Answer 1

嘗試這樣的事情：

var json = {
  "animal_Details": [{
    "animal_id": "4",
    "animal_name": "Lion",
    "Tag_Details": [{
      "Tag_name": "Herbivorous"
    }, {
      "Tag_name": "Omnivorous"
    }],
    "Level_Details": [{
      "level_id": "Food",
      "animal_a": "lion12",
      "animal_b": "lion0",
      "animal_c": "lion0"
    }, {
      "level_id": "Lives",
      "animal_a": "lion0",
      "animal_b": "lion20",
      "animal_c": "lion70"
    }, {
      "level_id": "Threats",
      "animal_a": "lionthreat",
      "animal_b": "lion0",
      "animal_c": "lion0"
    }]
  }, {
    "animal_id": "6",
    "animal_name": "Hen",
    "Tag_Details": [{
      "Tag_name": "Carnivorous"
    }, {
      "Tag_name": "Herbivorous"
    }, {
      "Tag_name": "Omnivorous"
    }],
    "Level_Details": [{
      "level_id": "Food",
      "animal_a": "Hen0",
      "animal_b": "Hen3",
      "animal_c": "Hen15"
    }, {
      "level_id": "Lives",
      "animal_a": "Hen0",
      "animal_b": "Hen0",
      "animal_c": "Hen0"
    }, {
      "level_id": "Threats",
      "animal_a": "Hen0",
      "animal_b": "Hen0",
      "animal_c": "Hen0"
    }]
  }]
};


var html = '';
$.each(json.animal_Details, function(i, v) {
  html += '<div class="col-xs-12 col-sm-6 col-md-8" id="videolistcontainer"><div class="portlet light bordered"><div class="portlet-title"><div class="caption"><span class="caption-subject font-green sbold uppercase">' + v.animal_name + '</span></div><div class="actions"><a href="#" class="btn btn-sm btn-danger"><i class="icon-pencil"></i> Delete</a></div></div><div class="portlet-body" style="padding-top:0px;"><div class="tags-body videolist-tags-body"><table class="table"><tbody><tr>';
  $.each(v.Tag_Details, function(x, z) {
    html += '<td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox">' + z.Tag_name + ' <span></span></label></td>';
  })

  html += '</tr></tbody> </table></div><div class="timerContainer"><table class="table"><tr>'
  var th1 = ' <th width="14%"></th>',
    th2 = '<td style="padding:0px;">A</td>',
    th3 = '<td style="padding:0px;">B</td>',
    th4 = '<td style="padding:0px;">C</td>';
  $.each(v.Level_Details, function(t, r) {
    th1 += '<th width="28.6%" align="left">' + r.level_id + '</th>';
    th2 += '<td><input type="text" name="PAC Name" data-required="1" value="' + r.animal_a + '" class="form-control"></td>';
    th3 += '<td><input type="text" name="PAC Name" data-required="1" value="' + r.animal_b + '" class="form-control"></td>';
    th4 += '<td><input type="text" name="PAC Name" data-required="1" value="' + r.animal_c + '" class="form-control"></td>';
  });
  html += th1 + '</tr><tr>' + th2 + '</tr><tr>' + th3 + '</tr><tr>' + th4;
  html += '</tr></table><br><button type="submit" class="btn btn-success" style="margin-left:92px;">Submit</button></div></div></div>';
});
console.log(html)
$('.content').append(html);

演示： http : //jsfiddle.net/tx1t20tm/

Answer 2

我已經使用過handlebarjs模板來渲染模板。 希望這可以幫助

 var json = { "animal_Details": [{ "animal_id": "4", "animal_name": "Lion", "Tag_Details": [{ "Tag_name": "Herbivorous" }, { "Tag_name": "Omnivorous" }], "Level_Details": [{ "level_id": "Food", "animal_a": "lion12", "animal_b": "lion0", "animal_c": "lion0" }, { "level_id": "Lives", "animal_a": "lion0", "animal_b": "lion20", "animal_c": "lion70" }, { "level_id": "Threats", "animal_a": "lionthreat", "animal_b": "lion0", "animal_c": "lion0" }] }, { "animal_id": "6", "animal_name": "Hen", "Tag_Details": [{ "Tag_name": "Carnivorous" }, { "Tag_name": "Herbivorous" }, { "Tag_name": "Omnivorous" }], "Level_Details": [{ "level_id": "Food", "animal_a": "Hen0", "animal_b": "Hen3", "animal_c": "Hen15" }, { "level_id": "Lives", "animal_a": "Hen0", "animal_b": "Hen0", "animal_c": "Hen0" }, { "level_id": "Threats", "animal_a": "Hen0", "animal_b": "Hen0", "animal_c": "Hen0" }] }] }; $(document).ready(function() { var theTemplate = Handlebars.compile ($('#theTemplate').html())(json); //console.log(theTemplate); $('body').append(theTemplate); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script id="theTemplate" type="text/x-handlebars-template"> {{#each animal_Details}} <div class="portlet light bordered"> <div class="portlet-title"> <div class="caption"><span class="caption-subject font-green sbold uppercase">{{animal_name}}</span></div> <div class="actions"><a href="#" class="btn btn-sm btn-danger"><i class="icon-pencil"></i> Delete</a></div> </div> <div class="portlet-body" style="padding-top:0px;"> <div class="tags-body videolist-tags-body"> <table class="table"> <tbody> <tr> {{#each Tag_Details}} <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox">{{Tag_name}} <span></span></label></td> {{/each}} </tr> </tbody> </table> </div> <div class="timerContainer"> <table class="table"> <tr> <th width="14%"></th> <th width="28.6%" align="left">A</th> <th width="28.6%" align="left">B</th> <th width="28.6%" align="left">C</th> </tr> {{#each Level_Details}} <tr> <td style="padding:0px;">{{level_id}}</td> <td><input type="text" name="PAC Name" data-required="1" class="form-control" value={{animal_a}}></td> <td><input type="text" name="PAC Name" data-required="1" class="form-control" value={{animal_b}}></td> <td><input type="text" name="PAC Name" data-required="1" class="form-control" value={{animal_c}}></td> </tr> {{/each}} </table> <br> <button type="submit" class="btn btn-success" style="margin-left:92px;">Submit</button> </div> </div> </div> {{/each}} </script>