Question 109330 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Using pure JS to filter checked checkboxes into a JSON array

I am trying to filter difficulty based on checked checkboxes. I have been searching a while looking for results or directions to a result, to no avail.

Research

Below is a piece of code that seems to work well, however using this does not work for pure JS. I have seen a way to do a for ( i = 0; i < difficultyFi.length; i++ ) but I feel like I am doing something wrong with that.

I have only ever used jQuery, very little of pure JS, so trying to get a similar result has turned out to be rather difficult.

Result

I am searching for all .difficultyFi elements, getting their values which results in all availableDifficulty, pushing their values to a JSON array. From there I find which checkboxes are :checked then push values of those remaining to another JSON array called activeDifficulty.

Conclusion

Once this has been accomplished, I aim to filter my main JSON array using the activeDifficulty array above. This is something I will tackle in the future haha!

Any help would be greatly appreciated!

// Filter difficulty

var availableDifficulty = [];
var activeDifficulty = [];
var difficultyFi = document.querySelectorAll('.difficultyFi');
console.log( difficultyFi );

difficultyFi.forEach( function() {
    
    var difVal = this.value();
    
    availableDifficulty.push( difVal );
    console.log( difVal );
    
    if ( this.hasAttribute( 'checked' ) ) {
        activeDifficulty.push( difVal );
        console.log( difVal );
    }
    
});
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I forgot that you could specify certain attributes as parameters in the function. Simply stating element, value gave me the result I required instead of using this.value().

    var availableDifficulty = [];
var activeDifficulty = [];
var difficultyFi = document.querySelectorAll('.difficultyFi');

difficultyFi.forEach( function(element, value) {

    var difVal = element.value;

    availableDifficulty.push( difVal );

    if ( element.hasAttribute( 'checked' ) ) {
        activeDifficulty.push( difVal );
    }

});

console.log( activeDifficulty );
    <div class="form-check form-switch">
  <input class="form-check-input difficultyFi" type="checkbox" role="switch" value="d_e" checked>
  <label class="form-check-label" for="d_e">Easy</label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input difficultyFi" type="checkbox" role="switch" value="d_m" checked>
  <label class="form-check-label" for="d_m">Moderate</label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input difficultyFi" type="checkbox" role="switch" value="d_h" checked>
  <label class="form-check-label" for="d_h">Hard</label>
</div>


  2. 0

    You can use few short helper functions. Spread operator [...checkboxes] is used to convert arraly-like NodeList returned by querySelectorAll to real array so you can run map on it. Map is used to create the array of objects with checkbox elements and its values.
    getActiveVals uses filter got only elements that are checked. Another map converts result object to its value string i.e. "d_e"

    const checkboxes = document.querySelectorAll('.difficultyFi');
const difficultyVals = [...checkboxes].map(e => ({ el: e, val: e.value }));
const getActiveVals = () => difficultyVals.filter(({el}) => el.checked).map(({val}) => val);

checkboxes.forEach(e => e.addEventListener('change', () => console.log(getActiveVals())));
    <div>
    <input type="checkbox" class="difficultyFi" value="d_e" checked> easy<br>
    <input type="checkbox" class="difficultyFi" value="d_m"> moderate<br>
    <input type="checkbox" class="difficultyFi" value="d_h"> hard<br>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search