jQuery: Transform JSON-Object to HTML-List improvements

Question

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

Why does the function render the lists double? Update: http://jsfiddle.net/KcvG6/2/
Are there any improvements about the logic to do?

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 })
    }
}

user400654 · Accepted Answer · 2012-05-25 15:09:23Z

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.

answered May 25, 2012 at 15:09

user400654

95.1k16 gold badges168 silver badges188 bronze badges

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

1 Comment

bodokaiser Over a year ago

Hi, cant I remove all childrens. Something like div > or div *?

Fresheyeball · Accepted Answer · 2012-05-25 15:13:18Z

1

http://jsfiddle.net/VF2sm/

Assuming you just want to replace the ul in your document, calling .children is not enough. You need to use .find, otherwise it will replace ALL children, of which you currently have 2

$(container).find('ul').replaceWith(renderList(objectCollection));

Or you could easily wipe out the entire contents and repace it with your list like this:

$(container).html(renderList(objectCollection));

As far the quality of your renderList() function, I think its just fine.

answered May 25, 2012 at 15:13

Fresheyeball

30.1k21 gold badges106 silver badges168 bronze badges

5 Comments

bodokaiser Over a year ago

Hi look at my update in the start post. Any suggestions about point 2 and 3?

Fresheyeball Over a year ago

Well on point 1/2. .html() is much better and simpler than: .children().remove() then .append in your fiddle update. As for point 3. I don't understand, no user interaction is in your script, so I don't know what you mean by 'the user hasn't selected anything' or the link is unavailable.

bodokaiser Over a year ago

Hi, indeed point 3 is hard to explain. So imagine I have two entities. Each entity can be changed by three actions (new, edit, delete). The edit and delete actions require a special url (with parameter). If I now want to manage another entity or the parameter for the edit and delete actions are missing and so they are useless and shouldn't get rendered

Fresheyeball Over a year ago

Can you provide a greater code sample. So far I would consider 3 unanswerable.

bodokaiser Over a year ago

Here: jsfiddle.net/KcvG6/5 (Routing.generate starts an ajax request generating the whole url from the framework routing config) It now works from the functional aspect more or less (the hiding of unvalid url is missing) but it is far away from smart

Collectives™ on Stack Overflow

jQuery: Transform JSON-Object to HTML-List improvements

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related