Ad

How To Hide Data That Is Undefined

- 1 answer

I'm passing several pieces of data through an array, and outputting the HTML through a div tag.

There is potential for two events to be displayed in the array. But, if I don't have any data for the second one, it will still display the icons.

What I'm trying to do is to hide that row if nothing is contained that part of the object.

I can't figure it out.

var f2fLearning = [  
  {
    f2fTitle: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium",
    f2fCompLong: "Competency",
    f2fCompShort: "compShortName",

    //These must all be the same
    f2fDataTarget: "position6",
    f2fAria: "position6",
    f2fId: "position6",

    //Modal
    f2fViewMore: "modalPosition6",

    f2fDesc: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.",

    //1 of 2
    f2fDateSpan1: "May 5-6, 2019",
    f2fLocation1: "Chicago, IL",
    f2fInstructor1: "fName lName",
    f2fProdNum1: "123456789", 

    //2 of 2
    f2fDateSpan2: "",
    f2fLocation2: "",
    f2fInstructor2: "",
    f2fProdNum2: "",  
    
    f2fHidden: ""   
  }
];  


$.each(f2fLearning, function (i) {
  var item = f2fLearning[i];
  html = $("#f2fLearning").html();
  $.each(item, function (key, value) {
    $("#f2fLearning").html(html +
      `<div class="col-sm-12 `+ item.f2fHidden +`">` +
        `<div class="row f-cat" data-cat="`+ item.f2fCompShort +`">` +
          `<div class="accordion" id="accordionExample">` +
            `<div class="card border-1 border-dark-light">` +
              `<div class="row no-gutters">` +
                `<div class="col-md-12">` +
                  `<div class="card-body pb-0">` +
                    `<h5 class="card-title font-weight-bold ism-text-dblue">`+ item.f2fTitle +`</h5>` +
                    `<p class="card-text color-dark font-weight-bold text-italic">Competency Covered: `+ item.f2fCompLong +`</p>` +
                  `</div>` +
                  `<div class="card-header bg-transparent border-0" id="headingOne">` +
                    `<h2 class="mb-0">` +
                      `<button class="btn btn-link p-0 float-right" type="button" data-toggle="collapse"
                        data-target="#`+ item.f2fDataTarget +`" aria-expanded="true" aria-controls="`+ item.f2fAria +`">` +
                        `<span hidden>text</span> <span class="fas fa-angle-double-down fa-w-10 fa-1x ism-text-green"></span>` +
                      `</button>` +
                    `</h2>` +
                  `</div>` +
                `</div>` +
              `</div>` +
            `</div>` +

            `<div id="`+ item.f2fId +`" class="collapse bg-grey" aria-labelledby="headingOne" data-parent="#accordionExample">` +
              `<div class="card-body p-3">` +
                `<p class="card-text mb-3">`+ item.f2fDesc +`</p>` +
                `<a target="_blank" rel="nofollow noreferrer" href="#" data-toggle="modal" data-target="#`+ item.f2fViewMore +`Inner"><span class="fal fa-plus-square"></span> View More</a>` +
              `</div>` +
              //New Row
              `<!-- New Row -->` +
              `<div class="card-footer bg-transparent">` +
                `<div class="row no-gutters text-center mb-3">` +
                  `<div class="col-sm-3">` +
                    `<h6><span class="far fa-calendar-alt ism-text-lblue align-middle mr-2"></span>`+ item.f2fDateSpan1 +`</h6>` +
                  `</div>` +
                  `<div class="col-sm-3">` +
                    `<h6><span class="fas fa-map-marker-alt ism-text-lblue mr-2"></span>`+ item.f2fLocation1+`</h6>` +
                  `</div>` +
                  `<div class="col-sm-3">` +
                    `<h6><span class="fas fa-user ism-text-lblue mr-2"></span>`+ item.f2fInstructor1 +`</h6>` +
                  `</div>` +
                  `<div class="col-sm-3">` +
                    `<a target="_blank" rel="nofollow noreferrer" href="`+ item.f2fProdNum1 +`" class="btn btn-primary btn-sm text-white">Register</a>` +
                  `</div>` +
                `</div>` +
              `</div>` +

              //New Row
              `<!-- New Row -->` +
              `<div class="card-footer bg-transparent">` +
                `<div class="row no-gutters text-center mb-3">` +
                  `<div class="col-sm-3">` +
                    `<h6><span class="far fa-calendar-alt ism-text-lblue align-middle mr-2"></span>`+ item.f2fDateSpan2 +`</h6>` +
                  `</div>` +
                  `<div class="col-sm-3">` +
                    `<h6><span class="fas fa-map-marker-alt ism-text-lblue mr-2"></span>`+ item.f2fLocation2 +`</h6>` +
                  `</div>` +
                  `<div class="col-sm-3">` +
                    `<h6><span class="fas fa-user ism-text-lblue mr-2"></span>`+ item.f2fInstructor2 +`</h6>` +
                  `</div>` +
                  `<div class="col-sm-3">` +
                    `<a target="_blank" rel="nofollow noreferrer" href="`+ item.f2fProdNum2 +`" class="btn btn-primary btn-sm text-white">Register</a>` +
                  `</div>` +
                `</div>` +
              `</div>` +
            `</div>` +
          `</div>` +
        `</div>` +
      `</div>`
    );
  });
});
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/7da1d4bf8c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>




<div id="f2fLearning"></div>

Ad

Answer

It's better you add the event data as array. Then you can easily loop through it and on each loop you can check if there is value is defined or not. Now here is just checking in your existing code. It's not a good method for dynamic data. Better you build like a tree array.

var f2flearning = [
    {
        f2ftitle: "sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium",
        f2fcomplong: "competency",
        f2fcompshort: "compshortname",

        //these must all be the same
        f2fdatatarget: "position6",
        f2faria: "position6",
        f2fid: "position6",

        //modal
        f2fviewmore: "modalposition6",

        f2fdesc: "at vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.",

        //1 of 2
        f2fdatespan1: "may 5-6, 2019",
        f2flocation1: "chicago, il",
        f2finstructor1: "fname lname",
        f2fprodnum1: "123456789",

        //2 of 2
        f2fdatespan2: "",
        f2flocation2: "",
        f2finstructor2: "",
        f2fprodnum2: "",

        f2fhidden: ""
    }
];


$.each(f2flearning, function (key, value) {
    var item = value;
    
        var newcontent = `<div class="col-sm-12 ` + item.f2fhidden + `">` +
            `<div class="row f-cat" data-cat="` + item.f2fcompshort + `">` +
            `<div class="accordion" id="accordionexample">` +
            `<div class="card border-1 border-dark-light">` +
            `<div class="row no-gutters">` +
            `<div class="col-md-12">` +
            `<div class="card-body pb-0">` +
            `<h5 class="card-title font-weight-bold ism-text-dblue">` + item.f2ftitle + `</h5>` +
            `<p class="card-text color-dark font-weight-bold text-italic">competency covered: ` + item.f2fcomplong + `</p>` +
            `</div>` +
            `<div class="card-header bg-transparent border-0" id="headingone">` +
            `<h2 class="mb-0">` +
            `<button class="btn btn-link p-0 float-right" type="button" data-toggle="collapse"
                        data-target="#`+ item.f2fdatatarget + `" aria-expanded="true" aria-controls="` + item.f2faria + `">` +
            `<span hidden>text</span> <span class="fas fa-angle-double-down fa-w-10 fa-1x ism-text-green"></span>` +
            `</button>` +
            `</h2>` +
            `</div>` +
            `</div>` +
            `</div>` +
            `</div>` +

            `<div id="` + item.f2fid + `" class="collapse bg-grey" aria-labelledby="headingone" data-parent="#accordionexample">` +
            `<div class="card-body p-3">` +
            `<p class="card-text mb-3">` + item.f2fdesc + `</p>` +
            `<a target="_blank" rel="nofollow noreferrer" href="#" data-toggle="modal" data-target="#` + item.f2fviewmore + `inner"><span class="fal fa-plus-square"></span> view more</a>` +
            `</div>`;
            
        if (item.f2fdatespan1)
            newcontent += `<!-- new row -->` +
                `<div class="card-footer bg-transparent">` +
                `<div class="row no-gutters text-center mb-3">` +
                `<div class="col-sm-3">` +
                `<h6><span class="far fa-calendar-alt ism-text-lblue align-middle mr-2"></span>` + item.f2fdatespan1 + `</h6>` +
                `</div>` +
                `<div class="col-sm-3">` +
                `<h6><span class="fas fa-map-marker-alt ism-text-lblue mr-2"></span>` + item.f2flocation1 + `</h6>` +
                `</div>` +
                `<div class="col-sm-3">` +
                `<h6><span class="fas fa-user ism-text-lblue mr-2"></span>` + item.f2finstructor1 + `</h6>` +
                `</div>` +
                `<div class="col-sm-3">` +
                `<a target="_blank" rel="nofollow noreferrer" href="` + item.f2fprodnum1 + `" class="btn btn-primary btn-sm text-white">register</a>` +
                `</div>` +
                `</div>` +
                `</div>`;

        if (item.f2fdatespan2)
            newcontent +=  //new row
                `<!-- new row -->` +
                `<div class="card-footer bg-transparent">` +
                `<div class="row no-gutters text-center mb-3">` +
                `<div class="col-sm-3">` +
                `<h6><span class="far fa-calendar-alt ism-text-lblue align-middle mr-2"></span>` + item.f2fdatespan2 + `</h6>` +
                `</div>` +
                `<div class="col-sm-3">` +
                `<h6><span class="fas fa-map-marker-alt ism-text-lblue mr-2"></span>` + item.f2flocation2 + `</h6>` +
                `</div>` +
                `<div class="col-sm-3">` +
                `<h6><span class="fas fa-user ism-text-lblue mr-2"></span>` + item.f2finstructor2 + `</h6>` +
                `</div>` +
                `<div class="col-sm-3">` +
                `<a target="_blank" rel="nofollow noreferrer" href="` + item.f2fprodnum2 + `" class="btn btn-primary btn-sm text-white">register</a>` +
                `</div>` +
                `</div>` +
                `</div>`;

        newcontent += `</div>` +
            `</div>` +
            `</div>` +
            `</div>`;

        var html = $("#f2flearning").html();
        $("#f2fLearning").html(html+newcontent);
  
});
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/7da1d4bf8c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>




<div id="f2fLearning"></div>

Ad
source: stackoverflow.com
Ad