CODEWITHSUNDEEP
javascriptjqueryarraysselect
Tobias
Tobias

Reputation: 494

Javascript group by array content

I have some problems figuring out how to group to certain variables in javascript.

Here is the deal.

I have one array containing categories in my case right now categories A-Z but it could be anything (Animals - dogs - cats - etc).

In another array I have a result from an xml file with different content (title, content and category). In my case the category containing letters from A-Z corresponding to the category in my other array.

So what I want to do is first of all output one div for each category from the category array. When that is done I want to add inside each div the matching category items form my other array.

This is an example

First output from my category array:

<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div id="D"></div>

Second I want to add inside those divs the array objects that has a matching category inside them A, B, C etc.

<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>

And so on...

Is this even possible?

EDIT: My First array only holds A, B, C, D, E etc so when iterating thru it array[i] i will get A B C D etc

My second array holds title category etc so if i want to have only the category i could iterate thru it like this arrMarkers[i].category. That would output ex. A A A B B E E F F F etc based on what categories the content of each array holds

Upvotes: 1

Views: 6949

Answers (2)

James Jithin
James Jithin

Reputation: 10555

If the array from the xml can be set to a two dimensional one, things can go fine. Please look at his example:

html:

<div id="containerDiv">
    <div id="A"></div>
    <div id="B"></div>
    <div id="C"></div>
</div>

javascript/jQuery

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>');
            }
        });
    }
);

This code goes dynamic so that if a non categorized item is encountered, it skips automatically.

Upvotes: 0

GregL
GregL

Reputation: 38121

Assuming you have your arrays defined something like this:

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'];

Then try the following jQuery code to create the divs:

$(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');
    });
});

You can see a working example here: http://jsfiddle.net/greglockwood/8F8hv/

Let me know if you have any problems.

Upvotes: 3

Related Questions