How to turn JavaScript array of objects into jQuery prependTo

Question

In the following exampmle I'm setting an array of objects and sort them by a key parameter (position). I then need to output the result - but how? See the comment in the code.

$(document).ready(function () {

    function sortHooks(){

        // add modules
        var modules = [ 
            { module: 'navbar', hook: 'hook-header', position: '2'},
            { module: 'logo', hook: 'hook-header', position: '3'},
            { module: 'description', hook: 'hook-header', position: '1'}
        ];

        // sort by "position" ASC
        function byPosition(a,b) {
            if (a.position < b.position)
                return -1;
            if (a.position > b.position)
                return 1;
            return 0;
        }

        // jQuery function with the given parameters
        /*  for each modules as modules
            for each hook as hook
            do the following:
            $( '#' + module )prependTo( '#' + hook )

            so for the given example it should return
            $('#description')prependTo('hook-header')
            $('#navbar')prependTo('hook-header')
            $('#logo')prependTo('hook-header')

            so they can be executed in that specific order.
            And since we're using "prepend" that will mean
            that the items be placed like this:
            #logo
            #navbar
            #description
        */

        return ???
    }

    // Execute sortHooks function
    sortHooks();
});

Maybe something like this, but I'm not exactly sure:

$.each(modules, function(index, value) {
    $( '#' + value.module ).prependTo( '#' + value.hook ));
});

I've tried a bunch of other things as well, one of them being Hook elements with insertAfter, but stay in parent - jQuery , which worked perfectly, but if the position was higher than the children inside the parent it didn't know what to do with it and causing a lot of unwanted behavior.

Off-topic: you could use function byPosition(a,b) { return a.position-b.position; } — Oriol
– Oriol, Commented Mar 20, 2014 at 19:06

Patrick Evans · Accepted Answer · 2014-03-20 19:10:49Z

1

just use a regular loop

for(var i=0; i<modules.length; i++){
   $( '#' + modules[i].module )prependTo( '#' + modules[i].hook );
}

answered Mar 20, 2014 at 19:10

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Georgi Demirev Over a year ago

This looks really simple and clean. But how to return the output from the loop to the function? jsfiddle.net/NicotineLL/5HFVY

Patrick Evans Over a year ago

return what output? there is no output, you are just prepending one element to another

Georgi Demirev Over a year ago

It wasn't working so I assumed I've to output the the result from the "for" loop and send it to the functions "return". Now that you said that I double checked everything else just to find that my elements ids differ... I changed them and everything works fine! jsfiddle.net/NicotineLL/5HFVY/1 Thank you!

Oriol · Accepted Answer · 2014-03-20 19:09:55Z

1

function byPosition(a,b) { return a.position-b.position; }
modules.sort(byPosition);
modules.forEach(function(obj){
    $('#'+obj.madule).prependTo('#'+obj.hook);
});

answered Mar 20, 2014 at 19:09

Oriol

291k71 gold badges459 silver badges535 bronze badges

3 Comments

Patrick Evans Over a year ago

note that unless they are using a shim/polyfill, forEach is not available on IE<9

Georgi Demirev Over a year ago

I'm not focusing on IE<9 support, but it's still better to be in there.

Oriol Over a year ago

@СърГеоргиДемирев $.each could be used instead.

Collectives™ on Stack Overflow

How to turn JavaScript array of objects into jQuery prependTo

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related