Generate html from JS

Question

I have the following snippet:

function getAllRecipes(){
  $.ajax({
    type: "GET",
    url: "https://api.npoint.io/7493fda05b8038212eed",
    beforeSend: function() {
      $("#AllRecipe").html('Fetching...')
    },
    success: function(json) {
    $("#AllRecipe").html('')

      if(!json.hasOwnProperty('error')){
      
        var add_html = '';
        var count_page = 1;
        $(json).each(function (new_i, new_val) {


          if(new_val.calorique == 1){
            var sport_recipe = '<span class="badge badge-pill badge-theme-1 position-absolute badge-top-left">SPORT</span>';
          }else{
            var sport_recipe = '';
          }
          var total_time = new_val.recipe_time + new_val.recipe_time_cooking;

          if(new_i == 0){
            var count = 0;
            add_html += '<div id="1" class="row list disable-text-selection pagination_cont active">';
          }
          if (new_i % 8 == 2) {
            var count = 0;
            count_page = count_page + 1;
            add_html += '<div id="'+count_page+'" class="row list disable-text-selection pagination_cont">';
          }
          count = count + 1;






          add_html += '<div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"><div class="card"><div class="position-relative"><a href="/recipes_details.php?recipeid='+new_val.id+'"><img class="card-img-top" src="'+new_val.image+'" alt=""></a>'+sport_recipe+'</div><div class="card-body"><div class="row"><div class="col-10"><a href="/recipes_details.php?recipeid='+new_val.id+'"><p class="list-item-heading mb-4 pt-1 first_uppercase">'+new_val.name+'</p></a><footer><p class="text-muted text-small mb-0 font-weight-light"><span style="margin-left: 2em" class="inline-flex"><svg style="width: 20px; height: auto" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><span class="ml-1">'+total_time+' min</span></span></p></footer></div></div></div></div></div>'

          if(count == 8){

          }
          if (new_i % 8 == 2) {
            add_html += '</div>';
          }
          if(new_i == 0){
            add_html += '</div>';
          }
        });
        $("#AllRecipe").html(add_html)

      }



       }
     });
  }
  
  $( document ).ready(function() {
  getAllRecipes();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="AllRecipe">

</div>

I'm getting the following result :

<div id="AllRecipe">
   <div id="1" class="row list disable-text-selection pagination_cont active">
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   </div>
   <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   <div id="2" class="row list disable-text-selection pagination_cont">
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   </div>
   <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   <div id="3" class="row list disable-text-selection pagination_cont">
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   </div>
   <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
</div>

My expected result:

<div id="AllRecipe">
   <div id="1" class="row list disable-text-selection pagination_cont active">
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   </div>
   <div id="2" class="row list disable-text-selection pagination_cont">
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
      <div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"></div>
   </div>       
</div>

How can I add 8 elements inside the .row .list class and create a new block ?

your Id are numbers... see https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Mister Jojo, Jul 07 '21 at 12:46

score -1 · Answer 1 · answered Jul 07 '21 at 12:27

Below code creates the expected structure in DOM -

function getAllRecipes() {
  $.ajax({
    type: "GET",
    url: "https://api.npoint.io/7493fda05b8038212eed",
    beforeSend: function() {
      $("#AllRecipe").html('Fetching...')
    },
    success: function(json) {
      $("#AllRecipe").html('');
      if (json.hasOwnProperty('error')) {
        return;
      }
      var add_html = '';
      var count_page = 1;
      $(json).each(function(new_i, new_val) {
        var sport_recipe = '';
        if (new_val.calorique == 1) {
          sport_recipe = '<span class="badge badge-pill badge-theme-1 position-absolute badge-top-left">SPORT</span>';
        }
        var total_time = new_val.recipe_time + new_val.recipe_time_cooking;
        var id = Math.floor(new_i / 8) + 1;
        var active = id == 1 ? ' active' : '';
        var num = (new_i + 1);
        var mod = num % 8;
        if (mod == 1) {
          add_html += '<div id="' + id + '" class="row list disable-text-selection pagination_cont' + active + '">';
        }
        add_html += '<div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"><div class="card"><div class="position-relative"><a href="/recipes_details.php?recipeid=' + new_val.id + '"><img class="card-img-top" src="' + new_val.image + '" alt=""></a>' + sport_recipe + '</div><div class="card-body"><div class="row"><div class="col-10"><a href="/recipes_details.php?recipeid=' + new_val.id + '"><p class="list-item-heading mb-4 pt-1 first_uppercase">' + new_val.name + '</p></a><footer><p class="text-muted text-small mb-0 font-weight-light"><span style="margin-left: 2em" class="inline-flex"><svg style="width: 20px; height: auto" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><span class="ml-1">' + total_time + ' min</span></span></p></footer></div></div></div></div></div>'
        if (mod == 0) {
          add_html += '</div>';
        }
      });
      //console.log(add_html);
      $("#AllRecipe").html(add_html);
    }
  });
}

$(document).ready(function() {
  getAllRecipes();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="AllRecipe">

</div>

Generate html from JS

1 Answers1