后端返回这样的 json 数组,前端怎么循环该数组成楼中楼的评论显示? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
s609926202
V2EX    问与答

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

  •  1
     
  •   s609926202 2017-12-04 21:56:24 +08:00 6262 次点击
    这是一个创建于 2915 天前的主题,其中的信息可能已经有所发展或是发生改变。
    [ { 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 评论楼中楼,,,这不知道吗,,,
    3IOhG7M0knRu5UlC
        5
    3IOhG7M0knRu5UlC  
       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
    TKKONE
        19
    TKKONE  
    PRO
       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 哈哈,我算法不行,而且我是前端+后端,标准码农一枚…
    TKKONE
        23
    TKKONE  
    PRO
       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
    TKKONE
        32
    TKKONE  
    PRO
       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
    @< href="/member/DualWield">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     Solana     1123 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 28ms UTC 17:53 PVG 01:53 LAX 09:53 JFK 12:53
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86