My HTML list is populated with values from JSON, and I have a button on the page.
<button onclick="printJsonList()">CLICK</button>
This button triggers the following JavaScript function:
function printJsonList(){
console.log(ctNameKeep);
var ctList = []; var ctRight = [];
var ctNameKeep = [];
var $tBody = $("#La");
var $rbody = $("#accordian");
$.getJSON('https://api.myjson.com/bins/n0u2o' , function (data) {
data.forEach((CTLIST) => {
if(ctNameKeep.includes(CTLIST.ct)){
return ;
}
else {
ctNameKeep.push(CTLIST.ct);
$tBody.append(`<li class="list-group-item" id="rl">
<span id="nameOfCt">${CTLIST.ct}</span>
<a href="#${CTLIST.ct}" class="btn btn-danger show" data-toggle="collapse">View More</a>
<div id="${CTLIST.ct}" class="collapse valueDiv">
<label>TTS</label> <input id="tts" type="text" value="${CTLIST.tts}"><br>
<label>Topic Level</label> <input id="topic_level" type="text" value="${CTLIST.topic_level}"><br>
<label>TimeOut</label> <input id="timeout" type="text" value="${CTLIST.timeout}"><br>
<label>To be shown individually</label> <input id="to_be_shown_individually" type="checkbox" ${(CTLIST.to_be_shown_individually && 'checked')}> <br>
<label>check for geometry</label><input id="check_for_geometry" type="checkbox" ${(CTLIST.check_for_geometry && 'checked')}><br>
<label>check_for_image_labelling</label> <input id="check_for_image_labelling" type="checkbox" ${(CTLIST.check_for_image_labelling && 'checked')}> <br>
</div>
</li>`);
} //else
});
})
console.log(ctNameKeep)
}
I store the names of the items in an array and avoid printing duplicates. It works well on the first click, but when clicked again, it repeats the list creation. I want to prevent duplicate entries even after multiple clicks without using global variables. Any possible solutions or replacements?