jquery reading an array of objects for output in a div

Posted on 2011-10-18
Last Modified: 2012-05-12
Hi all,

I've been coding a function to loop through checked checkboxes, take some values, add them to an array of objects for outputting in a div.

Here's where I've got to:

function filterobj(name,group,value){
    return {


//Place the filter on the filterboard
$.addToFilterBoard = function()
		var FilterObjects = [];
		$(":checkbox", "#filter_column").each(function() {
			if($(this).attr("checked") == "checked" ) {
				//Get the groups and option_ids into group arrays
				var splitarray = $(this).var().split('-');
				//Get label text
				var labeltext = $("label[for='chk" + $(this).attr("id") + "']");
				//Build the array of filter objects
		//Now need to update the filterboard with the new filterobject
		//Loop through the filterobject - wrap the <spans> then update the inner html of <div id="filterboard">


Open in new window

This reads from checkboxes:

<label for="chk489"><input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="1-489" id="chk489" />Option 1</label>
<label for="chk499"><input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="1-489" id="chk499" />Option 2</label>
<label for="chk512"><input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="2-489" id="chk512" />Option 3</label>
<label for="chk514"><input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="3-489" id="chk514" />Option 4</label>
..and so on..

Open in new window

The code builds an array of objects based on the label text, group_id and value - group_id is the first part of the hyphenated value (e.g. 1-489 so 1 is the group_id and 489 is the filter_id)

Now I want to update a <div> by outputting html with the group_id's wrapped in <span>'s  - Example:

<div id="filterboard">
	<span class="group>
		[x] option 1
		[x] option 2
	<span class="group">
		[x] option 3
	<span class="group">
		[x] option 4

Open in new window

I understand how to replace the html between a div but could anyone help how I do the next bit of coding to loop through the array of objects and build the output as desired?

Question by:dolythgoe
    LVL 27

    Accepted Solution

    Try the snippet below and I get the following output:

    <div id="output">
    <span class="A">1 XYZ<br>2 BAC<br></span>
    <span class="B">3 DED<br></span>
    <span class="C">4 KXI<br>5 ASD<br>6 DEL<br></span>

    $(function ()
    function OnReady()
        var myData = [new MyData(1, 'A', 'XYZ'),
                      new MyData(2, 'A', 'BAC'),
                      new MyData(3, 'B', 'DED'),
                      new MyData(4, 'C', 'KXI'),
                      new MyData(5, 'C', 'ASD'),
                      new MyData(6, 'C', 'DEL')];
        var output = '';
        var group = '';
        for (var i = 0; i < myData.length; i++)
            if (myData[i].group != group)
                group = myData[i].group;
                output += '<span class="' + group + '">';
                output += GetDetailsOfGroup(myData, group);
                output += '</span></p>';
    function GetDetailsOfGroup(myData, group)
        var outputPerGroup = '';
        for (var i = 0; i < myData.length; i++) {
            if(myData[i].group == group) {
                outputPerGroup += myData[i].id + ' ' + myData[i].name + '<br/>';
        return outputPerGroup;
    function MyData(id, group, name)
    { = id; = group; = name;

    Open in new window


    Author Closing Comment


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    "That which we persist in doing becomes easier, not that the task itself has become easier, but that our ability to perform it has improved." Ralph Waldo Emerson Introduction: One of the wonderful things about the web is that it makes it s…
    In my daily work (mainly using, I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now