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

Я получаю этот JSON от бэкэнд. JSON представляет собой массив из двух элементовКак построить следующий HTML динамически из ответа 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/

источник

2016-10-21 Pawan

Это, вероятно, будет лучше генерировать HTML на сервере (используя реальный шаблонный движок) и вернуть то, что вместо JSON. –

попробовать что-то вроде этого:

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/

источник

2016-10-21 07:23:59 madalinivascu

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

используйте шаблонный двигатель, если это сложно для вас, это просто простая петля – madalinivascu

Я использовал 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>

источник

2016-10-21 07:57:12 masif

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

ответ

Смежные вопросы