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
rupesh asked 2 weeks 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
  <br>
  <button id="btnForm">Filter</button>
</div>

JavaScript:

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

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

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

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

function filter() {

myMarkers.clearLayers();

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

let categories = [];

if (cbAdults.checked) {
    categories.push('adults');
}
if (cbYouth.checked) {
    categories.push('youth');
}
if (cbSeniors.checked) {
    categories.push('seniors')
}
if (cbMen.checked) {
    categories.push('men');
}
if (cbWomen.checked) {
    categories.push('women');
}

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;
                break;
            }
    }
}
}
1 Answers
Best Answer
Mikhail answered 2 weeks ago
Your Answer

17 + 10 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com