• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 238
  • Last Modified:

jquery reading an array of objects for output in a div

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 {
      name:name,
      group:group,
      value:value
    }


}


//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
				FilterObjects.push(filterobj(labeltext,splitarray[0],splitarray[1]));
			}
			
		});
		
		//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>
	<span class="group">
		[x] option 3
	</span>
	<span class="group">
		[x] option 4
	</span>
</div>

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?

Cheers
0
dolythgoe
Asked:
dolythgoe
1 Solution
 
nmarunCommented:
Try the snippet below and I get the following output:

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

$(function ()
{
    OnReady();
});

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>';
        }
    }
    $('#output').html(output);
}

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)
{
    this.id = id;
    this.group = group;
    this.name = name;
}

Open in new window

0
 
dolythgoeAuthor Commented:
Thanks!!
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now