I'm getting the values of checkboxes when a user submits the form and storing their values as an array, so the form looks like this:

<!-- gym_create.html - I have removed the other inputs in the form for brevity -->

<form class="create-gym" role="form">
  <input type="checkbox" name="gymTags" value="Bodybuilding" id="tagBodybuilding" class="tag-checkbox"/>
  <input type="checkbox" name="gymTags" value="Powerlifting" id="tagPowerlifting" class="tag-checkbox"/>
  <button type="submit" class="btn create-form-submit">Save gym</button>
</form>

And then I collect that information in my JS file associated with the form:

// gym_create.js - I have removed the other values I collect apart from the gymName value for brevity

Template.gymCreate.events({
  "submit .create-gym": function (e) {

    e.preventDefault();

    var tagOutput = JSON.stringify({
    tagOutput: $(':checkbox[name=gymTags]:checked').map(function() {
        return $(this).val();
      }).get()
    });

    // Collect values from form when submitted
    var gymDetails = {
      gymName: $(e.target).find('[name=gymName]').val(),
      gymTags: tagOutput,
    }

    // Call method here
  }
});

I can then output these in my template using {{gymDetails.gymTags}} but this produces the following in the browser:

"{"TAGOUTPUT":["BODYBUILDING","POWERLIFTING"]}"

What I want is a way to store the values as JSON so they are like so:

{"gymTags": {
  "bodybuilding": "true",
  "powerlifting": "false"
}}

So that I can output each tag on it's own and also access only tags which are 'true' (that were checked) later on.

Does anyone know how I go about this? I wrangled with it all yesterday and the best I could e up with was the =JSON.stringify

I don't want to pass the entire form to JSON, just the checkboxes, is JSON.stringify what I want to be doing or am I barking up the wrong tree.

I'm getting the values of checkboxes when a user submits the form and storing their values as an array, so the form looks like this:

<!-- gym_create.html - I have removed the other inputs in the form for brevity -->

<form class="create-gym" role="form">
  <input type="checkbox" name="gymTags" value="Bodybuilding" id="tagBodybuilding" class="tag-checkbox"/>
  <input type="checkbox" name="gymTags" value="Powerlifting" id="tagPowerlifting" class="tag-checkbox"/>
  <button type="submit" class="btn create-form-submit">Save gym</button>
</form>

And then I collect that information in my JS file associated with the form:

// gym_create.js - I have removed the other values I collect apart from the gymName value for brevity

Template.gymCreate.events({
  "submit .create-gym": function (e) {

    e.preventDefault();

    var tagOutput = JSON.stringify({
    tagOutput: $(':checkbox[name=gymTags]:checked').map(function() {
        return $(this).val();
      }).get()
    });

    // Collect values from form when submitted
    var gymDetails = {
      gymName: $(e.target).find('[name=gymName]').val(),
      gymTags: tagOutput,
    }

    // Call method here
  }
});

I can then output these in my template using {{gymDetails.gymTags}} but this produces the following in the browser:

"{"TAGOUTPUT":["BODYBUILDING","POWERLIFTING"]}"

What I want is a way to store the values as JSON so they are like so:

{"gymTags": {
  "bodybuilding": "true",
  "powerlifting": "false"
}}

So that I can output each tag on it's own and also access only tags which are 'true' (that were checked) later on.

Does anyone know how I go about this? I wrangled with it all yesterday and the best I could e up with was the =JSON.stringify

I don't want to pass the entire form to JSON, just the checkboxes, is JSON.stringify what I want to be doing or am I barking up the wrong tree.

• javascript
• jquery
• json
• meteor

2 Answers 2

I think this should do it. You were just returning the just the value of the inputs. You want to return a json object, where the value is the "index" and the checked property is the "value" of the object.

var tagOutput = JSON.stringify({
    tagOutput: $(':checkbox[name=gymTags]').map(function() {
        var op = {};
        op[this.value] = this.checked;
        return op;
    }).get()
});

Edit: as noted by Da Rod, to use both checked and unchecked checkboxes, you must remove the ":checked" selector.

Since your selector is only grabbing items that are checked, they are all "true". That being the case, you need to change the way you are using "map" to add properties to tagOutput.

var tagOutput = {}
$(':checkbox[name=gymTags]').map(function() {
        tagOutput[this.value] = this.checked;
    })
});