JSFiddle - React, Tailwind, and code Playground

by brandon_rmsy

HTML

<div class="contentbox">

</div>

CSS

.parent{background-color:#eee;color:#585858;
    border:1px solid #ff0000;padding:5px;margin:3px;}
.child{background-color:#;color:#000;
    border:1px dashed #585858;padding:5px;margin:3px 3px 3px 20px;}
.grandkid{background-color:#F2F5A9;color:#585858;
    border:1px dotted #888888;padding:5px;margin:3px 3px 3px 40px;}

JavaScript

$.getJSON("http://classifinity.com/api/v1/feed?format=json&num=10&q=classifinity_impression_i:%5B1%20TO%20*%5D",function(result) {
    var resultArray = result;
    
    if(resultArray.length > 0){
        $.each(resultArray, function(idx,value){         
           //get the parent data            
           var parentArray= value.data.children;
            if(parentArray.length > 0){
               $.each(parentArray,function(parentIdx, parentVal){
                   var parentAuthor = parentVal.data.author,
                       parentBody = parentVal.data.body || 'no parent body',
                       parentTxt = parentVal.data.selftext || 'no parent selftext';
                   $('div.contentbox')
                       .append('<div class="com-wrap parent"><div class="com-body">' +
                             '['+parentIdx + '.] '+                                
                             parentAuthor + ' <br /> ' + parentTxt +' <br /> ' + 
                             parentBody + '</div></div>');  
                   
                   //now that we are nested, get any children
                   if(parentVal.data.replies !== undefined){
                       var childArray = parentVal.data.replies.data.children;
                       if(childArray.length > 0){
                           $.each(childArray,function(childIdx, childVal){
                               var childAuthor = childVal.data.author,
                                   childBody = childVal.data.body || 'no child body',
                                   childTxt = childVal.data.selftext || 'no child selftext';                                                               
                               $('div.contentbox')
                                   .append('<div class="com-wrap child"><div class="com-body">' +
                             '['+parentIdx + '.'+childIdx+'] '+                                
                             childAuthor + ' <br /> ' +...