Jquery doesn't generate html

Question

I don't get any errors, but doesn't show data from the files. Don't know what i'm doing wrong.

Tested it local and on local server. Still doesn't work. I think i'm missing code or mixing up js/jquery..

Don't have an active sample because i can't share the full files.

json Data Example :

[
    { "title":"Friet","description":"","active":"1","highlight":"-1"},
    { "title":"Vegetarisch","description":"Snack met broodje komt er 0,80 bij.","active":"1","highlight":"-1"}
]

(JQuery v3.5.1)

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>var $n = jQuery.noConflict();</script>

Code :

var Products = require('../../../data/products.json');
var Categories = require('../../../data/categories.json');
var tProd = Products.length;
var tCat = Categories.length;
var sCat = 0;

var vCat = sCat + 1;

for (i = 0; i < tCat; i++) {
  if (Categories[i]['Active'] == 1) {
    var renderCat = `
            <div name="cat` + vCat + `" class="products-category">
                <div class="category-head" style="background-image: url('assets/app/fdf/img/cat-banner-` + vCat + `.png');">
                    <span class="category-title">&nbsp;` + Categories[sCat]['title'] + `&nbsp;</span>
                    <span class="category-description">` + Categories[sCat]['description'] + `</span>
                </div>`;
  } else {
    var renderCat = `
            <div name="cat` + vCat + `" class="products-category" style="opacity: 0.5" >
                <div class="category-head" style="background-image: url('assets/app/fdf/img/cat-banner-` + vCat + `.png');">
                    <span class="category-title">&nbsp;` + Categories[sCat]['title'] + `&nbsp;</span>
                    <span class="category-description">` + Categories[sCat]['description'] + `</span>
                </div>`;
  };
  $n('#products').append(renderCat);

  for (iPc = 0; iPc < tProd; iPc++) {

    if (Products[iPc]['active'] == 1) {
      var renderProd = `
                <div class="category-item">
                    <span class="item-button-addproduct"><span class="fas fa-plus"></span></span>
                    <span class="item-title">` + Products[iPc]['title'] + `</span>
                    <span class="item-description">` + Products[iPc]['description'] + `</span>
                    <span class="item-price">` + Curr + Products[iPc]['price'] + `</span>
                </div>
                `;
    } else {
      var renderProd = `
                <div class="category-item" style="opacity: 0.5">
                    <span class="item-button-addproduct"><span class="fas fa-times"></span></span>
                    <span class="item-title">` + Products[iPc]['title'] + `</span>
                    <span class="item-description">` + Products[iPc]['description'] + `</span>
                    <span class="item-price">` + Curr + Products[iPc]['price'] + `</span>
                </div>
                `;
    }

    $n('#products').append(renderProd);
    sCat++;

  };
  $n('#products').append('</div>');
};

question from:https://stackoverflow.com/questions/65893859/jquery-doesnt-generate-html

Answer 1

Your 'renderCat' var is out of scope when appending to #products.

  var renderCat;
  if (Categories[i]['Active'] == 1) {
    renderCat = `
            <div name="cat` + vCat + `" class="products-category">
                <div class="category-head" style="background-image: url('assets/app/fdf/img/cat-banner-` + vCat + `.png');">
                    <span class="category-title">&nbsp;` + Categories[sCat]['title'] + `&nbsp;</span>
                    <span class="category-description">` + Categories[sCat]['description'] + `</span>
                </div>`;
  } else {
    renderCat = `
            <div name="cat` + vCat + `" class="products-category" style="opacity: 0.5" >
                <div class="category-head" style="background-image: url('assets/app/fdf/img/cat-banner-` + vCat + `.png');">
                    <span class="category-title">&nbsp;` + Categories[sCat]['title'] + `&nbsp;</span>
                    <span class="category-description">` + Categories[sCat]['description'] + `</span>
                </div>`;
  };
  $n('#products').append(renderCat);

Seeing as you're using jQuery, you might also want to lookup things like:

$("<div />").addClass("products-category")
    .append($("<div />")
        .append($("<span />").html(Categories[sCat]['title'])));

etc ...

For example, you could use:

var titleSpan = $("<span />").html(Categories[sCat]['title']);

And then reuse that:

var newDiv = $("<div />").append(titleSpan);

instead of manually making all that html.