V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
s609926202
V2EX  ›  问与答

后端返回这样的 json 数组,前端怎么循环该数组成楼中楼的评论显示?

  •  1
     
  •   s609926202 · 2017-12-04 21:56:24 +08:00 · 5834 次点击
    这是一个创建于 2547 天前的主题,其中的信息可能已经有所发展或是发生改变。
    [ 
        { 
            id: 2, 
            post: 73, 
            parent: 0, 
            children: [ 
                { 
                    id: 3, 
                    post: 73, 
                    parent: 2 
                } 
            ], 
        } 
    ]
    

    突然不知道该怎么处理 children 循环了,,,

    63 条回复    2017-12-05 23:26:44 +08:00
    adspe
        1
    adspe  
       2017-12-04 22:15:03 +08:00
    Map 套 Map ?
    s609926202
        2
    s609926202  
    OP
       2017-12-04 22:20:52 +08:00
    @adspe 我不知啊,,
    SO647898
        3
    SO647898  
       2017-12-04 23:02:18 +08:00 via Android
    可能理解能力不达标,完全不知道楼主在困扰什么。
    block。
    s609926202
        4
    s609926202  
    OP
       2017-12-04 23:03:45 +08:00
    @SO647898 评论楼中楼,,,这不知道吗,,,
    GooMS
        5
    GooMS  
       2017-12-04 23:07:41 +08:00 via Android
    自己调自己
    yaoliyc
        6
    yaoliyc  
       2017-12-04 23:21:42 +08:00 via iPhone
    递归啊
    silymore
        7
    silymore  
       2017-12-05 00:06:04 +08:00 via iPhone
    面向 V2EX 编程
    sagaxu
        8
    sagaxu  
       2017-12-05 01:22:27 +08:00 via Android
    宝宝树
    valkyrja
        9
    valkyrja  
       2017-12-05 02:27:55 +08:00 via Android
    @SO647898 你来 v2 是专门来 block 人的吗😂
    msg7086
        10
    msg7086  
       2017-12-05 02:55:20 +08:00
    算法中的基本操作,递归(或者用堆栈和循环实现的伪递归)。
    Yuigahama
        11
    Yuigahama  
       2017-12-05 03:02:02 +08:00
    @valkyrja 再看看这 b 创建的唯一一个主题的内容
    我们回他一个 block 吧
    WhoMercy
        12
    WhoMercy  
       2017-12-05 07:45:00 +08:00 via Android
    深度优先 or 广度优先
    看你们前端的展示层接口怎么填充数据方便
    armoni
        13
    armoni  
       2017-12-05 08:17:01 +08:00
    看看前端 tree 的实现,一样的
    SO647898
        14
    SO647898  
       2017-12-05 09:11:31 +08:00 via Android
    @valkyrja
    眼不见为净,只有 block 咯。


    @Yuigahama
    张口闭口就来个 b 或 c,九年义务教育教出你这样的,没素质,block。
    yunying
        15
    yunying  
       2017-12-05 09:14:49 +08:00
    这是最最最基本的算法问题。一眼就能看出。。为什么 lz 会困扰?这不是学计算机的必修基础吗?
    SO647898
        16
    SO647898  
       2017-12-05 09:16:20 +08:00 via Android
    @valkyrja
    顺便看一下楼主的帖子,这些,不应该出现在 csdn 或者百度知道甚至知乎里的吗?
    (╯3╰)
    gbin
        17
    gbin  
       2017-12-05 09:16:34 +08:00 via Android
    昨天还在议论 v2 吐槽太多,好不容易发个技术问题,还要被嫌弃?
    tradzero
        18
    tradzero  
       2017-12-05 09:38:21 +08:00 via Android
    @SO647898 那你自己的帖子 觉得应该出现在 v2 吗 233
    tumbzzc
        19
    tumbzzc  
       2017-12-05 09:39:58 +08:00 via Android
    #3 是一个奇葩,看历史发言,前几条都是 block ??
    loveyu
        20
    loveyu  
       2017-12-05 09:41:44 +08:00
    后端有时候也挺无奈的,给这样的结构有些像 lz 一样理解不来,给整理后的结构又有些觉得要基础数据自己处理好。所以跟后端商量下就好了
    mingzu
        21
    mingzu  
       2017-12-05 09:44:09 +08:00
    @SO647898 哈哈哈啊哈哈,把 block 当作必杀技了吧?
    别人不回你帖子就是单纯嫌你,别挂在自己性别上.
    s609926202
        22
    s609926202  
    OP
       2017-12-05 09:48:26 +08:00 via iPhone
    @loveyu 哈哈,我算法不行,而且我是前端+后端,标准码农一枚…
    tumbzzc
        23
    tumbzzc  
       2017-12-05 09:48:41 +08:00 via Android
    @mingzu 我还以为他是专门 block 而注册的 v2
    mingzu
        24
    mingzu  
       2017-12-05 09:49:40 +08:00
    @s609926202 递归走起来呀~
    mingzu
        25
    mingzu  
       2017-12-05 09:51:11 +08:00
    @tumbzzc 真是好好笑哎,因为自己发的帖子被别人怼了 block,且没人搭理,
    于是就开始 diss 别人..
    最起码换个小号呀得..这多尴尬..哈哈哈哈哈
    s609926202
        26
    s609926202  
    OP
       2017-12-05 09:51:26 +08:00 via iPhone
    @mingzu 其实我调用的接口返回给我的就是普通的数据表记录值,然后我在前端处理成这样的 children,,
    loveCoding
        27
    loveCoding  
       2017-12-05 09:51:38 +08:00
    有层级的数据都是这样传递的啊..
    mingzu
        28
    mingzu  
       2017-12-05 09:54:26 +08:00
    @s609926202 我比较菜啊,一般处理数据都得放在后端吧,前端处理这种逻辑好像不大合适的。
    应该是后端把数据处理好 前端直接遍历 吧大概。
    听听别的大佬咯。
    SO647898
        29
    SO647898  
       2017-12-05 11:53:04 +08:00 via Android
    @mingzu
    不如替换开头四个字为“文科女生”搜索一下试试?
    讽刺虽然具有时代性,但我没想到,这会让人。。。已 block。
    codermagefox
        30
    codermagefox  
       2017-12-05 12:16:25 +08:00
    @SO647898 我觉得你才比较像贴吧选手,是不是还要拉个旗搞家族 block 大战啊?MDZZ
    onlyhot
        31
    onlyhot  
       2017-12-05 12:25:47 +08:00 via iPhone
    @SO647898 已 b
    tumbzzc
        32
    tumbzzc  
       2017-12-05 12:40:58 +08:00 via Android
    @SO647898 历史发言主题单调。已 block
    mingzu
        33
    mingzu  
       2017-12-05 12:55:41 +08:00
    @SO647898 哈哈哈哈,单身是因为女生都拜金,没钱是因为自己不是富二代,成绩不好是因为老师差
    其实都是因为你是你。

    谢谢 block
    cjyang1128
        34
    cjyang1128  
       2017-12-05 13:07:00 +08:00
    @SO647898 兄弟你好逗。。
    billie
        35
    billie  
       2017-12-05 13:13:03 +08:00 via Android
    @SO647898 才没有人在意你的
    block,加戏
    meszyouh
        36
    meszyouh  
       2017-12-05 13:14:47 +08:00
    遍历,生成一个多叉树就可以了
    douglas1997
        37
    douglas1997  
       2017-12-05 13:16:06 +08:00 via iPhone
    @SO647898 @livid 不友善言论
    killerv
        38
    killerv  
       2017-12-05 13:44:24 +08:00
    递归实现吧。
    --------------
    v 站总是有些人以为自己 block 一下别人好像会对别人有多大影响似的。
    searene
        39
    searene  
       2017-12-05 13:53:58 +08:00
    随手写了一下。

    function printComments(comments, depth) {
    for(var i = 0; i < comments.length; i++) {
    var c = comments[i];
    console.log(getSpaces(depth * 2) + "My post is " + c.post);
    if(c.hasOwnProperty("children")) {
    printComments(c.children, depth + 1);
    }
    }
    }

    function getSpaces(n_spaces) {
    spaces = "";
    for(var i = 0; i < n_spaces; i++) {
    spaces += " ";
    }
    return spaces;
    }

    json = [
    {
    id: 2,
    post: 73,
    parent: 0,
    children: [
    {
    id: 3,
    post: 73,
    parent: 2
    }
    ],
    },
    {
    id: 4,
    post: 29,
    parent: 0
    }
    ];
    printComments(json, 0);

    输出:
    My post is 73
    My post is 73
    My post is 29
    searene
        40
    searene  
       2017-12-05 13:54:20 +08:00
    居然格式全乱了
    s609926202
        41
    s609926202  
    OP
       2017-12-05 14:01:41 +08:00
    @searene 回复无法修改默认格式的,,
    yexiaoxing
        42
    yexiaoxing  
       2017-12-05 14:03:51 +08:00
    @searene 代码贴 gist 吧,这样格式不会乱
    DualWield
        43
    DualWield  
       2017-12-05 14:04:42 +08:00
    @SO647898 兄台,我觉得你应该去学习下什么叫礼貌,再想一想大家为什么针对你
    zgx030030
        44
    zgx030030  
       2017-12-05 14:05:12 +08:00
    写个函数,遍历这个数组,遍历时检查每个元素是否有 children,如果有,直接再调这个函数,递归进去再遍历。。。一层层的。
    萌新不懂,加 block 是什么意思?
    block
    searene
        45
    searene  
       2017-12-05 14:08:29 +08:00
    zjw60320
        46
    zjw60320  
       2017-12-05 14:18:02 +08:00
    这不是基础的递归么,lz 还是多学习吧,这种问题百度都有的
    @SO647898 戏太多了,block
    s609926202
        47
    s609926202  
    OP
       2017-12-05 14:35:23 +08:00
    Tks.
    jatesun
        48
    jatesun  
       2017-12-05 15:30:03 +08:00
    好像只能递归
    Sypher
        49
    Sypher  
       2017-12-05 15:45:18 +08:00   ❤️ 2
    @zgx030030
    没人说我说了:
    block 是 V 站的一个功能,你点开想要拉黑的人的主页,右上角有个 block 按钮,点了就可以拉黑了。
    orzfly
        50
    orzfly  
       2017-12-05 16:17:20 +08:00
    @Sypher #49 "瞎说,明明是给 CSS 加上 display: block “ 跑(
    SO647898
        51
    SO647898  
       2017-12-05 16:44:32 +08:00 via Android
    @DualWield
    大多数人戾气重呗,我只是正确使用 block 功能而已,我觉得有些人把礼貌使用歪了,正义也只不过是利益而已,不符合自己的利益,在某些人心里,就是不正义,你觉得真的是我不礼貌?一我没飙脏字,二来态度不好完全是他人理解问题,这论坛 n 年不加图片功能,难道我要备一套表情图连接么,当然了,我也没说我没错,毕竟一个巴掌拍不响,有些人真的喜欢没事找事,不是这攻击我就是那攻击我,我也很无语啊~
    要不是最近有很多想看的贴看不了,我也不会注册,v2 的 block 功能很棒。
    1iuh
        52
    1iuh  
       2017-12-05 16:50:36 +08:00
    @SO647898 #51 我也觉得 v2 的 block 功能很赞,让我可以 block 你。已 block,记得回我一个 block 哟。
    aaronlam
        53
    aaronlam  
       2017-12-05 16:52:46 +08:00
    @SO647898 看你留言浪費我流量 block
    zhouwei520
        54
    zhouwei520  
       2017-12-05 17:24:08 +08:00
    外面的是楼回复,里面的是楼中楼回复。可以搜下递归遍历。
    zhouwei520
        55
    zhouwei520  
       2017-12-05 17:24:41 +08:00
    就是循环套循环
    zkd8907
        56
    zkd8907  
       2017-12-05 17:31:43 +08:00   ❤️ 1
    https://gist.github.com/zkd8907/91ab1b5256fe173f6ffd13a6d88d2210

    直接返回数组,用 referenceId 之类的外键把父评论关联上。这样好处是如果一个评论在多个评论中被回复,只要出现一次就好。数据库的存储也可以这么设计。
    Icezers
        57
    Icezers  
       2017-12-05 18:04:46 +08:00 via iPhone
    用递归全部展开,再用 id 和 parent 关系组合吧
    anthozoan77
        58
    anthozoan77  
       2017-12-05 19:45:53 +08:00
    @SO647898 有问题提出来,不解决问题,block 提出问题的人?况且 LZ 也没有虚张声势标题党。
    SourceMan
        59
    SourceMan  
       2017-12-05 20:41:56 +08:00 via iPhone
    哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈

    好好的技术帖吵起来了。。。
    昨天还嫌这里的东西越来越没有营养
    dlrdegk
        60
    dlrdegk  
       2017-12-05 21:12:13 +08:00
    我觉得 v2 最好能讨论一下有创意的点子或者问题,或者程序员拉拉家常
    楼主这个问题可以去 segmentfault 或者百度知道问好些(逃

    当然我觉得 @SO647898 说话还是冲了一点,别人只是提了个问题而已
    SO647898
        61
    SO647898  
       2017-12-05 21:29:42 +08:00 via Android
    @anthozoan77

    @dlrdegk

    可能我是冲了点吧,看到标题党、伸手党之类的,戾气不自觉+1。
    vjnjc
        62
    vjnjc  
       2017-12-05 22:00:52 +08:00
    楼主是觉得 children:[]这个格式不好处理吧,把它换成 parent:[]呗~
    s609926202
        63
    s609926202  
    OP
       2017-12-05 23:26:44 +08:00
    @vjnjc 不是不好处理,而是我在做小程序时,如果是拿这样的数组来循环楼中楼效果,必须先循环最外层的评论,,然后在里边继续判断 clildern 然后进行循环 clildern,这样我想显示几层楼,就必须手动循环几次,,超级费事,,
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   905 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 20:10 · PVG 04:10 · LAX 12:10 · JFK 15:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.