Question

I have the following jquery code:

$('.menubox').children('div').toArray().map(function(n,i){
            return [$(n).children('input').val(),$(n).children('.subs').children('div').toArray().map(function(n,i){ 
                    return [$(n).children('input').val(),$(n).children('.subs').children('div').toArray().map(function(n,i){ 
                            return $(n).children('input').val(); 
                        })];
                })];
        });

This is the HTML to go with that:

        <td class="menubox">
        <div class="draggable droppable lvl0">
            <input type="hidden" value="-" />
            LBL1
            <div class="subs"></div>
        </div>
        <div class="draggable droppable lvl0">
            <input type="hidden" value="-" />
            LBL2
            <div class="subs">                  
                <div class="draggable droppable lvl1">
                    <input type="hidden" value="3" />
                    <b>LBL2.1</b><span style="display:block;"><a class="deleteItem">verwijder</a></span>
                    <div class="subs"></div>
                </div>                  

                <div class="draggable droppable lvl1">
                    <input type="hidden" value="6" />
                    <b>LBL2.2</b><span style="display:block;"><a class="deleteItem">verwijder</a></span>
                    <div class="subs"></div>
                </div>                  
            </div>
        </div>
    </td>

It works fine in chrome but IE throws an error:

Error: Object doesn’t support this property or method

When I remove the map() function, the error is gone. What am I doing wronge here?

Answer 1

What am I doing wronge here?

Calling .toArray() on a jQuery object. Remove those calls, and add .get() after .map() if you want to end up with a vanilla JS array. Note that jQuery’s .map() callback takes index, element while Array.map‘s callback takes element, index so you also need to swap the argument names.

var results = $('.menubox').children('div').map(function(i, n)
{
    return [
        $(n).children('input').val(),
        $(n).children('.subs').children('div').map(function(i, n)
        {
            return [
                $(n).children('input').val(),
                $(n).children('.subs').children('div').map(function(i, n)
                {
                    return $(n).children('input').val();
                }).get()
            ];
        }).get()
    ];
}).get();

console.log(JSON.stringify(results));
// ["-",[],"-",["3",[],"6",[]]]

This works in Chrome but not IE since Chrome supports Array.map() but (surprise, surprise) IE <9 do not.

Demo: http://jsfiddle.net/mattball/5KBdA/