I have a JSON dataset and I'm trying to extract the information of individuals who haven't paid their dues. Initially, when running the code with the if statement commented out, it works perfectly fine - giving the expected output in both the console and the HTML page where only a div with id=demo is present. However, upon uncommenting the if statement, while the console logs the correct results, the HTML page displays two (instead of three) lines with "undefined". This issue has left me puzzled as I've run out of ideas on what else needs to be modified.
var data;
data = [{
"dues paid": "",
"name": "john",
"age": "18",
"city": "Jamestown"
},
{
"dues paid": "100",
"name": "marvin",
"age": "27",
"city": "Dallas"
},
{
"dues paid": "100",
"name": "janice",
"age": "22",
"city": "Denver"
}
]
let arr = [];
let checkbox = document.getElementById("check");
function setup() {
let strLine = "";
let checked = checkbox.checked;
if(checked)
for (var i = 0; i < data.length; i++) {
if (data[i]['dues paid'] !== "" ){
console.log(i,data[i]['name']);
arr.push(data[i]['name'] );
strLine = strLine + arr[i] + "\<br>";
}
}
else
for (var i = 0; i < data.length; i++) {
//if (data[i]['dues paid'] !== "" ){
console.log(i,data[i]['name']);
arr.push(data[i]['name'] );
strLine = strLine + arr[i] + "\<br>";
//}
}
document.getElementById("demo").innerHTML = strLine;
}
document.getElementById("test").onclick=setup;With if: <input type="checkbox" id="check"/><br/>
<button id="test">Test</button>
<p>Output below</p>
<div id="demo"></div>