UnKnown UnKnown - 1 month ago 8
jQuery Question

How to construct the following HTML dynamically from JSON response

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/

Answer

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/