Javascript jQuery:将JSON对象转换为HTML列表

Javascript jQuery:将JSON对象转换为HTML列表,javascript,jquery,json,Javascript,Jquery,Json,我编写了一个将多维json对象转换为html列表的函数: 为什么函数会使列表加倍? 更新: 在逻辑上有什么改进吗 原始JSON对象在url属性中生成url。 这些URL是使用给定的slug生成的。如果给定的slug尚不可用(用户未选择任何内容或不应呈现链接的其他内容): 'image': { 'index': { 'name': 'Show all images', 'url': Routing.generate('AcmeImageBundle_Ima

我编写了一个将多维json对象转换为html列表的函数:

  • 为什么函数会使列表加倍? 更新:

  • 在逻辑上有什么改进吗

  • 原始JSON对象在url属性中生成url。 这些URL是使用给定的slug生成的。如果给定的slug尚不可用(用户未选择任何内容或不应呈现链接的其他内容):

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

  • 由于对.children()的调用,这种情况发生了两次。您正在用列表替换每个子元素。请选择第一个子元素并替换它

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

    如果需要删除
    元素,请分别执行此操作。

    假设您只想替换文档中的
    ul
    ,调用
    .children
    是不够的。您需要使用
    .find
    ,否则它将替换所有子项,其中您当前有2个

    $(container).find('ul').replaceWith(renderList(objectCollection));
    
    或者,您可以很容易地擦除全部内容,然后用列表重新粘贴,如下所示:

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

    至于你的
    renderList()
    函数的质量,我认为还可以。

    嗨,我不能删除所有的孩子。像div>或div*?嗨,看看我在开始文章中的更新。关于第2点和第3点有什么建议吗?关于第1/2点。
    .html()
    比:
    .children().remove()好得多,也简单得多
    然后
    。在你的fiddle更新中添加
    。至于第3点。我不明白,你的脚本中没有用户交互,所以我不知道“用户没有选择任何内容”或链接不可用是什么意思。嗨,确实第3点很难解释。假设我有两个实体。每个实体可以通过三个操作进行更改编辑和删除操作需要一个特殊的URL(带参数)。如果现在我想管理另一个实体,或者编辑和删除操作的参数丢失,那么它们是无用的,不应该被渲染的,你能提供一个更大的代码示例吗?到目前为止,我会考虑3个无法回答的问题。(Routing.generate启动一个从框架路由配置生成整个url的ajax请求)它现在或多或少从功能方面起作用(未验证url的隐藏缺失),但它远离智能