Question

I have written a function which transforms a multidimensional json-object to an html list:
http://jsfiddle.net/KcvG6/

1. Why does the function render the lists double?
   Update: http://jsfiddle.net/KcvG6/2/

2. Are there any improvements about the logic to do?

3. The original JSON-object generates urls in the url attribute.
   These urls are generated with a given slug. If the given slug is not yet available (the user hasn’t selected anything or what else the link should not be rendered:

   'image': {
       'index': {
           'name': 'Show all images',
           'url': Routing.generate('AcmeImageBundle_Image_index')
       },
       'new': {
           'name': 'Add new image',
           'url': Routing.generate('AcmeImageBundle_Image_new')
       },
       'edit': {
           'name': 'Edit selected image',
           'url': Routing.generate('AcmeImageBundle_Image_edit', { 'slug': imageSlug })
       },
       'delete': {
           'name': 'Delete selected image',
           'url': Routing.generate('AcmeImageBundle_Image_delete', { 'slug': imageSlug })
       }
   }
   

Answer 1

It happens twice because of the call to .children(). You are replacing each child element with the list. Instead, select the first child and replace it.

$(container).children().first().replaceWith(renderList(objectCollection));

http://jsfiddle.net/KcvG6/1/

If you need to remove the <p> element, do that separately.