JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<span></span>

CSS

div{float:left}
span{float:left}

JavaScript

var obj=[{"shape": "circle","health": "red","children": [{"shape": "triangle-up","health": "yellow","children": [{"shape": "circle","health": "green","children": [{"shape": "circle","health": "red"}]},{"shape": "circle","health": "red","children": [{"shape": "circle","health": "yellow"}]},{"shape": "circle","health": "red","children": [{"shape": "circle","health": "green","children": [{"shape": "circle","health": "red"},{"shape": "circle","health": "red"}]}]},{"shape": "square","health": "green","children": [{"shape": "square","health": "red"},{"shape": "triangle-up","health": "red","children": [{"shape": "square","health": "red"},{"shape": "triangle-up","health": "red"}]}]}]}]}]



var x=0
var newobj;
function loop(obj,type1,type2){    
    for(i in obj){      
console.log(i)        
            if(obj[i].shape==type1 && obj[i].health==type2){ 
                $('div').append(obj[i].shape+'-'+obj[i].health+'<br>')
                if(!x){                                      
                newobj=obj[i];                     
                }
                else {
                    
                newobj.children=[]
                newobj.children.push(obj[i])
                }
                x++
     }
           
         
    loop(obj[i].children,type1,type2)
    }    
    
       
    
}

function filter(){
loop(obj,'circle','red')
}

filter()

console.log(newobj)