Try to search your question here, if you can't find : Ask Any Question Now ?

Filter CSV data attributes with HTML Checkbox and JavaScript

HomeCategory: stackoverflowFilter CSV data attributes with HTML Checkbox and JavaScript
Avatarrupesh asked 3 months ago

I have been trying to setup of filtering feature using HTML checkbox and JavaScript. I found something that does exactly what I have been trying to accomplish. The only issue with this method, the data is a JSON array and the data I am working with is a CSV file. I tried converting my CSV into JSON but the JSON Demographic names are giving me a problem. I can not figure out how to combine several names in one field in the CSV file as shown in the JSON. Everything I tried to do causes and error in reading in the data. Currently I am at a lost as to what to do. I really would like to use the CSV because that is how I get the data and future updates will be done via CSV. I’m open to accomplishing this concept a different way. Any help/solution with this will greatly be appreciated.

JSON dataset – My data is CSV instead of JSON

let myJSON = [{
    lat: 10,
    lon: 10,
    demographic: ['youth']
    lat: 6,
    lon: 10,
    demographic: ['adults', 'men']
    lat: 10,
    lon: 12,
    demographic: ['adults']
    lat: 7,
    lon: 8,
    demographic: ['adults', 'seniors', 'women']


HTML Checkboxes

 <div id="form">
  <input type="checkbox" id="cbAdults" checked>Adults
  <input type="checkbox" id="cbYouth" checked>Youth
  <input type="checkbox" id="cbSeniors" checked>Seniors
  <input type="checkbox" id="cbMen" checked>Men
  <input type="checkbox" id="cbWomen" checked>Women
  <button id="btnForm">Filter</button>


let map ='map').setView([9, 9], 4);

L.tileLayer('https://{s}{z}/{x}/{y}.png', {
attribution: '© <a href="">OpenStreetMap</a> contributors'

let myMarkers = L.featureGroup().addTo(map);

btnForm.onclick = () => filter();

function filter() {


let myJSONcopy = JSON.parse(JSON.stringify(myJSON));

let categories = [];

if (cbAdults.checked) {
if (cbYouth.checked) {
if (cbSeniors.checked) {
if (cbMen.checked) {
if (cbWomen.checked) {

for (let i = 0; i < myJSONcopy.length; i++) {
    for (let j = 0; j < categories.length; j++) {
        for (let k = 0; k < myJSONcopy[i].demographic.length; k++)
            if (categories[j] == myJSONcopy[i].demographic[k] && !myJSONcopy[i].added) {
                L.circleMarker([myJSONcopy[i].lat, myJSONcopy[i].lon]).addTo(myMarkers);
                myJSONcopy[i].added = true;
1 Answers
Best Answer
AvatarMikhail answered 3 months ago
Your Answer

4 + 11 =

Popular Tags

WP Facebook Auto Publish Powered By :