jQuery: how do I construct a 2d Array?

Question

I have this simplified version of my webpage (its a mess IRL):

<li id=section1 class=sortable_section>
    <header>
    <ul id=container1>
        <li id=item1 class=sortable_item>
        <li id=item2 class=sortable_item>
    </container
</section

<li id=section2 class=sortable_section>
    <header>
    <ul id=container2>
        <li id=item3 class=sortable_item>
        <li id=item4 class=sortable_item>
        <li id=item5 class=sortable_item>
    </container>
</section>

So, I can do $j("container1").sortable('serialize') which creates an array of the ids of all the containing li's. so I would get ["item1", "item2"] for container1.

How do I make an array that looks like this:

[
 ["section1", ["item1", "item2"]],
 ["section2", ["item3", "item4", "item5"]]
]

This is what ive been trying: but it doesn't work

        d = $j.makeArray(
        $j('.sortable_section').each(function(i){
            [$j(this).attr("id"),
                $j.makeArray($j.map($j("#"+$j(this).attr("id")+" .sortable_item"), function(s,j){
                    return ($j(s).attr("id"));
                }))]
        }));

But it returns the entire objects, rather than just the ids....

EDIT: as per one of the answers' suggestions, this is now what I have

d = $j(".sections > li").map(function(index, element){
                return [$j(element).attr('id'),
                    $j("#"+$j(element).attr('id') + " .content").map(function(subindex, subelement){
                        return $j(subelement).attr('id');
                    }).toArray()];


            }).toArray();

but I get this error

TypeError: Result of expression near '...}).toArray()]...' [undefined] is not a function.

When I do alerts on $j(element).attr('id') and $j(subelement).attr('id') I get the correct ids

Answer 1

Could you use

var serializedListItems = $("li").serializeArray();

Answer 2

Use jQuery's map function:

$('#master-list > li').map(function(index, element)
{
    return [$(element).attr('id'),
        $(this).children('ul > li').map(function(subindex, subelement)
        {
            return $(subelement).attr('id');
        }).toArray()];
}).toArray();

Edit:

My bad. The above has been updated with the appropriate .toArray() calls.

Re-edit:

Alright, that's what I get for freestyle coding. Here is the correct, actually tested script, along with the markup I used to test it. I was unable to reproduce your error, but it could be caused by an element without an id or possibly have something to do with your renaming the $ symbol to $j.

<script type="text/javascript">
    $(function () {
        var x = $('#master-list > li').map(function (index, element) {
            return [[element.id,
                $(element).find('li').map(function (subindex, subelement) {
                    return subelement.id;
                }).toArray()]];
        }).toArray();
    });
</script>

<ul id="master-list">
    <li id="section1" class="sortable_section">
        Header
        <ul id="container1">
            <li id="item1" class="sortable_item">a</li>
            <li id="item2" class="sortable_item">b</li>
        </ul>
    </li>

    <li id="section2" class="sortable_section">
        Header
        <ul id="container2">
            <li id="item3" class="sortable_item">a</li>
            <li id="item4" class="sortable_item">b</li>
            <li id="item5" class="sortable_item">c</li>
        </ul>
    </li>
</ul>

The reason the above didn't work was a little oddity regarding jQuery's map function: apparently, if you return an array of values, it flattens the array and returns all of the values. So instead of [a, [b, c]] you just get [a, b, c]. To get around this, I added an extra set of brackets so that you are now returning an array containing an array, which, when flattened, is what you want.

FYI, you don't need to do this:

$('#' + $(element).attr('id') + ' .content')

You can get the same effect in more readable code with this:

$(element).find('.content');