0

Been working on creating an input parameter to an API based upon the checked boxes, so that it returns with things that we want. However it doesn't seem to like my parameter style/ or whatever is being input. The URL that's being generated back to me doesn't include the strings of checkboxed data.

Here's some code:

var optionSelected = $("#healthLabels").val();
  //console.log(optionSelected);
  var parameter = "";

  for (a = 0; a < optionSelected.length; a++) {
    parameter += "&health=" + optionSelected[a];
    console.log("inside loop for health parameter :" + parameter);
  }



  var queryURL =
    "https://api.edamam.com/search?q=" +
    dish +
    "&app_id=$385e5d34&app_key=${API-KEY}&from=0&to=1&calories=0-" +
    calorieMAX +
    parameter +
    "";

This returns back the object, just not without the search parameter that's needed. I'm looking for it to input the string that's being checked and then return an object containing that string.

HTML: 

            <div class="form-check"><ul id="healthLabels">
                <li><input type="checkbox" class="form-check-input" id="">
                <label class="form-check-label" for="materialUnchecked">Alcohol-Free</label></li>
                <li><input type="checkbox" class="form-check-input" id="d">
                <label class="form-check-label" for="materialUnchecked">Crustacean-Free</label></li>
                <li><input type="checkbox" class="form-check-input" id="">
                <label class="form-check-label" for="materialUnchecked">Dairy-Free</label></li>
                <li><input type="checkbox" class="form-check-input" id="">
                <label class="form-check-label" for="materialUnchecked">Egg-Free</label></li>
                <li><input type="checkbox" class="form-check-input" id="">
                <label class="form-check-label" for="materialUnchecked">Keto-Friendly</label></li>
                <li><input type="checkbox" class="form-check-input" id="">
                <label class="form-check-label" for="materialUnchecked">Vegetarian</label></li>
                <li><input type="checkbox" class="form-check-input" id="">
                <label class="form-check-label" for="materialUnchecked">Tree-Nut-Free</label></li>
                </ul>
            </div>
Grayson McMurry
  • 11
  • 5
  • First of all, having 2 elements with the same ID is not valid html according to the W3C specification. Also the way you tried to get selected elements and iterate them is not correct. – ajafari Oct 28 '19 at 19:59
  • This post can help you: https://stackoverflow.com/questions/53230787/iterate-through-multiple-input-fields-with-jquery – ajafari Oct 28 '19 at 20:04

0 Answers0