Javascript 以父子层次结构显示JSON数据_Javascript_Jquery_Json

Javascript 以父子层次结构显示JSON数据

javascript jquery json

Javascript 以父子层次结构显示JSON数据,javascript,jquery,json,Javascript,Jquery,Json,我们希望以父子层次结构显示JSON数据 var JsonArr = [{ "comment":"Comment 1", "commentID":1, "parentID":0, "children":[{ "comment":"Comment 1-2",

我们希望以父子层次结构显示JSON数据

var JsonArr = [{
                   "comment":"Comment 1", 
                   "commentID":1, 
                   "parentID":0,
                   "children":[{
                              "comment":"Comment 1-2", 
                              "commentID":2, 
                              "parentID":1, 
                              "children":[{
                                         "comment":"Comment 1-2-2",
                                         "commentID":1,
                                         "parentID":2 
                                         }]
                            }]
                },
                {
                "comment":"Comment 2", 
                "commentID":4, 
                "parentID":0
               }]

电流输出：

预期输出：

工作区：

任何直接的帮助都是非常值得的。谢谢。

检查这个

不完全是

树

结构，但我们可以使用

css

和传递

级别

信息来模拟它

function showComments(comments,level){//Extra parameter for level information
 for(var i = 0; i < comments.length; i++) {
     commentsContainer = loadComment(comments[i], commentsContainer,level)//render comment along with level information
    if (comments[i]['children'] && comments[i]['children'].length) {
      showComments(comments[i]['children'],level+1)//next level for children
    }
  }
}

function loadComment(commentObj, commentsContainer,level){//level of node
    var profileFullName = "Rohit Jindal";
    //add some padding multiplied with level for each comment element
    var commentHTML = '<div class="commentbox" style="padding-left:'+(level*100)+'px;"><div class="commentphoto"><a href="#123"><img src="https://graph.facebook.com/100000816365798/picture?type=square"></a></div><div class="commentcontent"><a href="#123"><strong>' + profileFullName + '</strong></a> &nbsp;<small>Just now</small><br>' + commentObj.comment + '<br><a name="replyComment" commentid="' + commentObj.commentID + '">Reply</a><span id="votescore-' + commentObj.commentID + '" class="votescore"></span></div></div>';
    commentsContainer.append(commentHTML);
    return commentsContainer;
}

showComments(JsonArr,0);//call showComment with initial level 0

函数showcoments（comments，level）{//级别信息的额外参数
对于（var i=0；iReply'；
append（commentHTML）；
返回评论容器；
}
showComments（JsonArr，0）//调用初始级别为0的showComment

检查此项

不完全是

树

结构，但我们可以使用

css

和传递

级别

信息来模拟它

function showComments(comments,level){//Extra parameter for level information
 for(var i = 0; i < comments.length; i++) {
     commentsContainer = loadComment(comments[i], commentsContainer,level)//render comment along with level information
    if (comments[i]['children'] && comments[i]['children'].length) {
      showComments(comments[i]['children'],level+1)//next level for children
    }
  }
}

function loadComment(commentObj, commentsContainer,level){//level of node
    var profileFullName = "Rohit Jindal";
    //add some padding multiplied with level for each comment element
    var commentHTML = '<div class="commentbox" style="padding-left:'+(level*100)+'px;"><div class="commentphoto"><a href="#123"><img src="https://graph.facebook.com/100000816365798/picture?type=square"></a></div><div class="commentcontent"><a href="#123"><strong>' + profileFullName + '</strong></a> &nbsp;<small>Just now</small><br>' + commentObj.comment + '<br><a name="replyComment" commentid="' + commentObj.commentID + '">Reply</a><span id="votescore-' + commentObj.commentID + '" class="votescore"></span></div></div>';
    commentsContainer.append(commentHTML);
    return commentsContainer;
}

showComments(JsonArr,0);//call showComment with initial level 0

函数showcoments（comments，level）{//级别信息的额外参数
对于（var i=0；iReply'；
append（commentHTML）；
返回评论容器；
}
showComments（JsonArr，0）//调用初始级别为0的showComment

我对您的代码做了一些修改。请看一下小提琴：

JAVASCRIPT:

$(document).ready(function() {
 var StmId = $('[name = "StatementId"]').val();
 var JsonArr = [{
                   "comment":"Comment 1", 
                   "commentID":1, 
                   "parentID":0,
                   "children":[{
                              "comment":"Comment 1-2", 
                              "commentID":2, 
                              "parentID":1, 
                              "children":[{
                                         "comment":"Comment 1-2-2",
                                         "commentID":1,
                                         "parentID":2 
                                         }]
                            }]
                },
                {
                "comment":"Comment 2", 
                "commentID":4, 
                "parentID":0
               }]

var commentsContainer = $("<div></div>");

showComments(JsonArr);

function loadComment(commentObj, commentsContainer, isChild){
   // console.log(commentObj);
    var profileFullName = "Rohit Jindal";
    var marginLeft = '';
    if ( commentObj.parentID > 0 ) {
         marginLeft = 'style="margin-left: '+commentObj.parentID*60+'px;"'
    }

    var commentHTML = '<div '+marginLeft+' class="commentbox"><div class="commentphoto"><a href="#123"><img src="https://graph.facebook.com/100000816365798/picture?type=square"></a></div><div class="commentcontent"><a href="#123"><strong>' + profileFullName + '</strong></a> &nbsp;<small>Just now</small><br>' + commentObj.comment + '<br><a name="replyComment" commentid="' + commentObj.commentID + '">Reply</a><span id="votescore-' + commentObj.commentID + '" class="votescore"></span></div></div>';
    commentsContainer.append(commentHTML);
       // console.log(commentsContainer.closest('.commentbox'));
    return commentsContainer;
}

function showComments(comments, isChild){
 for(var i = 0; i < comments.length; i++) {
    // console.log(comments[i]['comment']);
       commentsContainer = loadComment(comments[i], commentsContainer, isChild)
    if (comments[i]['children'] && comments[i]['children'].length) {
      showComments(comments[i]['children'], true)
    }
  }
}

$('.commentbox').append(commentsContainer);
});

$（文档）.ready（函数（）{
var StmId=$（'[name=“StatementId”]'）。val（）；
var JsonArr=[{
“评论”：“评论1”，
“评论ID”：1，
“parentID”：0，
“儿童”：[{
“意见”：“意见1-2”，
“评论ID”：2，
“家长ID”：1，
“儿童”：[{
“意见”：“意见1-2-2”，
“评论ID”：1，
“家长ID”：2
}]
}]
},
{
“评论”：“评论2”，
“评论ID”：4，
“父ID”：0
}]
var commentsContainer=$（“”）；
showComments（JsonArr）；
函数loadComment（commentObj、commentsContainer、isChild）{
//console.log（commentObj）；
var profileFullName=“Rohit Jindal”；
var marginLeft=''；
如果（commentObj.parentID>0）{
marginLeft='style=“margin left:'+commentObj.parentID*60+'px；“'
}
var commentHTML='Just now
'+commentObj.comment+'
Reply'；
append（commentHTML）；
//log（commentsContainer.closest（'.commentbox'））；
返回评论容器；
}
函数showComments（comments，isChild）{
对于（var i=0；i

我对您的代码做了一些修改。请看一下小提琴：

JAVASCRIPT:

$(document).ready(function() {
 var StmId = $('[name = "StatementId"]').val();
 var JsonArr = [{
                   "comment":"Comment 1", 
                   "commentID":1, 
                   "parentID":0,
                   "children":[{
                              "comment":"Comment 1-2", 
                              "commentID":2, 
                              "parentID":1, 
                              "children":[{
                                         "comment":"Comment 1-2-2",
                                         "commentID":1,
                                         "parentID":2 
                                         }]
                            }]
                },
                {
                "comment":"Comment 2", 
                "commentID":4, 
                "parentID":0
               }]

var commentsContainer = $("<div></div>");

showComments(JsonArr);

function loadComment(commentObj, commentsContainer, isChild){
   // console.log(commentObj);
    var profileFullName = "Rohit Jindal";
    var marginLeft = '';
    if ( commentObj.parentID > 0 ) {
         marginLeft = 'style="margin-left: '+commentObj.parentID*60+'px;"'
    }

    var commentHTML = '<div '+marginLeft+' class="commentbox"><div class="commentphoto"><a href="#123"><img src="https://graph.facebook.com/100000816365798/picture?type=square"></a></div><div class="commentcontent"><a href="#123"><strong>' + profileFullName + '</strong></a> &nbsp;<small>Just now</small><br>' + commentObj.comment + '<br><a name="replyComment" commentid="' + commentObj.commentID + '">Reply</a><span id="votescore-' + commentObj.commentID + '" class="votescore"></span></div></div>';
    commentsContainer.append(commentHTML);
       // console.log(commentsContainer.closest('.commentbox'));
    return commentsContainer;
}

function showComments(comments, isChild){
 for(var i = 0; i < comments.length; i++) {
    // console.log(comments[i]['comment']);
       commentsContainer = loadComment(comments[i], commentsContainer, isChild)
    if (comments[i]['children'] && comments[i]['children'].length) {
      showComments(comments[i]['children'], true)
    }
  }
}

$('.commentbox').append(commentsContainer);
});

$（文档）.ready（函数（）{
var StmId=$（'[name=“StatementId”]'）。val（）；
var JsonArr=[{
“评论”：“评论1”，
“评论ID”：1，
“parentID”：0，
“儿童”：[{
“意见”：“意见1-2”，
“评论ID”：2，
“家长ID”：1，
“儿童”：[{
“意见”：“意见1-2-2”，
“评论ID”：1，
“家长ID”：2
}]
}]
},
{
“评论”：“评论2”，
“评论ID”：4，
“父ID”：0
}]
var commentsContainer=$（“”）；
showComments（JsonArr）；
函数loadComment（commentObj、commentsContainer、isChild）{
//console.log（commentObj）；
var profileFullName=“Rohit Jindal”；
var marginLeft=''；
如果（commentObj.parentID>0）{
marginLeft='style=“margin left:'+commentObj.parentID*60+'px；“'
}
var commentHTML='Just now
'+commentObj.comment+'
Reply'；
append（commentHTML）；
//log（commentsContainer.closest（'.commentbox'））；
返回评论容器；
}
函数showComments（comments，isChild）{
对于（var i=0；i