Ad
How To Hide Data That Is Undefined
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
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad