- Javascript group by array content
- <div id="A"></div>
- <div id="B"></div>
- <div id="C"></div>
- <div id="D"></div>
- <div id="A">
- <div id="contentFromMyOtherArray"> this object comes from my other array and had the content category A </div>
- <div id="contentFromMyOtherArray"> this object also comes from my other array and had the content category A still inside the A div </div>
- </div>
- <div id="B">
- <div id="contentFromMyOtherArray"> this object comes from the array and had the content category B </div>
- </div>
- var categories = ['A', 'B', 'C', 'D'];
- var other = [];
- other['A'] = ['item 1', 'item 2', 'item 3'];
- other['B'] = ['item 4', 'item 5'];
- other['C'] = ['item 6'];
- $(document).ready(function() {
- $.each(categories, function(index, category) {
- var categoryId = category.replace(/ /gi, '_');
- var newCategory = $('<div />').attr('id', categoryId);
- // you can set any other properties on this new div here using .attr()
- $.each(other[category], function(index, item) {
- var itemId = category + '_' + item.replace(/ /gi, '_');
- var newInnerDiv = $('<div />').attr('id', itemId);
- // set any other properties like text content, etc here
- newInnerDiv.appendTo(newCategory);
- });
- newCategory.appendTo('body');
- });
- });
- <div id="containerDiv">
- <div id="A"></div>
- <div id="B"></div>
- <div id="C"></div>
- </div>
- var resultArray = [
- ["A", "Title1", "this object comes from my other array and had the content category A"],
- ["B", "Title2", "this object comes from my other array and had the content category B"],
- ["C", "Title3", "this object comes from my other array and had the content category C"],
- ["D", "Title4", "this object comes from my other array and had the content category D"],
- ["A", "Title5", "this object comes from my other array and had the content category A"],
- ["A", "Title6", "this object comes from my other array and had the content category A"],
- ["C", "Title7", "this object comes from my other array and had the content category C"],
- ["D", "Title8", "this object comes from my other array and had the content category D"],
- ["C", "Title9", "this object comes from my other array and had the content category C"],
- ["D", "Title10", "this object comes from my other array and had the content category D"],
- ["A", "Title11", "this object comes from my other array and had the content category A"],
- ["D", "Title12", "this object comes from my other array and had the content category D"],
- ["C", "Title13", "this object comes from my other array and had the content category C"],
- ["B", "Title14", "this object comes from my other array and had the content category B"]
- ];
- $(document).ready(
- function() {
- var holderMap = new Array();
- $("div#containerDiv").children("div").each(
- function() {
- holderMap[$(this).attr("id")]=$(this);
- }
- );
- var elem = null;
- var value = null;
- $(resultArray).each(function() {
- elem = holderMap[$(this)[0]];
- value = $(this)[2];
- if(elem) {
- $(elem).html($(elem).html() + '<div id="contentFromMyOtherArray">' + value + '</div>');
- }
- });
- }
- );