How to construct the following HTML dynamically from JSON response

Question

I receive this JSON from backend. The JSON is an array of two elements

{
  "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"
    }]
  }]
}

For each element in above JSON i am trying to create the Following 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>

I am able to parse the JSON as shown below , but i am unable to construct the required 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));

}

Could you please let me know how to construct the HTML dynamically

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

It would probably be better to generate the html on the server (using a real templating engine) and return that instead of the json. — Sam Axe
– Sam Axe, Commented Oct 21, 2016 at 7:13

madalinivascu · Accepted Answer · 2016-10-21 07:23:59Z

try something like this:

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

demo:http://jsfiddle.net/tx1t20tm/

thank you very much for the work .. i tried but it is too complex , so finding optimum solutions , this code you given is good .
use a templating engine if this is to complex for you, this is just simple looping

masif · Accepted Answer · 2016-10-21 07:57:12Z

I have used handlebarjs templating to render the template. hope this helps

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>

Collectives™ on Stack Overflow

How to construct the following HTML dynamically from JSON response

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related