Блог

Главная - Вопросы по программированию - Как динамически создать следующий HTML-код из ответа JSON

Как динамически создать следующий HTML-код из ответа JSON

#jquery #json

#jquery #json

Вопрос:

Я получаю этот 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/

Комментарии:

1. Вероятно, было бы лучше сгенерировать HTML-код на сервере (используя реальный механизм создания шаблонов) и вернуть его вместо json.

Ответ №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 /

Комментарии:

1. большое вам спасибо за работу .. я пытался, но это слишком сложно, поэтому для поиска оптимальных решений приведенный вами код хорош.

2. используйте механизм создания шаблонов, если это слишком сложно для вас, это всего лишь простой цикл

Ответ №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>