Question

I’m dynamically generating a list of checkboxes based on the contents of json data:

Format of tempfairway:
[{"FairWay":"A"},{"FairWay":"B"}, {"FairWay":"C"}, {"FairWay":"D"}]

var topics = tempfairway;
var topicContainer = $('ul#fairway_list');
$.each(topics, function (iteration, item) { topicContainer.append(
$(document.createElement("li")).append(
$(document.createElement("input")).attr({
        id: 'topicFilter-' + item,
        name: item, 
        value: item,
        type: 'checkbox',
        checked: true
        })
        //onclick
        .click(function (event) {
         var cbox = $(this)[0];
         alert(cbox.value);
         })
).append(
$(document.createElement('label')).attr({
'for': 'topicFilter' + '-' + item
}).text(item)
   )
     )
});

The checkboxes generate fine with the correct number but i’m getting [object Object] instead of the name of the fairway.

Any ideas on how to fix this?

Couple of more questions to add to this:
-What if i wanted to display ONLY unique values in tempfairway?
-.Click is set to get the value of that single checkbox, what if i want to iterate through all the checkboxes and get the value of all the ones that were selected in the case that the user unselected any of them?

Answer 1

In the line:

> $.each(topics, function (iteration, item) {

item is an object like {"FairWay":"A"}, so where you have:

> .text(item)

you probably want:

 .text(item.FairWay)

and similarly for other uses of item. Or you could store the value in a variable and use that:

var fairwayName = item.FairWay;
...
.text(fairwayName);