Javascript按数组内容分组

Question

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 AZ 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 AZ 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 ABCD 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. AAABBEEFFF etc based on what categories the content of each array holds

Answer 1

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.

Answer 2

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.