JSFiddle - React, Tailwind, and code Playground

by Julian

HTML

<div id="cache"></div>
<div id="result"></div>

CSS

.element {
    padding-left: 10px;
}

#result {
    padding-top: 10px;
}

JavaScript

var data = [
     {
        "Object": "Car",
        "Child": [
            {
                "Object": "Toyota",
                "Child": [
                    {
                        "Object": "Prius"
                    },
                    {
                        "Object": "Yaris"
                    }
                ]
            },
            {
                "Object": "Honda",
                "Child": [
                    {
                        "Object": "Accord"
                    },
                    {
                        "Object": "Civic",
                        "Child": [
                            {
                                "Object": "Sedan"
                            },
                            {
                                "Object": "Coupe"
                            }
                        ]
                    }
                ]
            }
        ]
    }
];


function precache(data, target) {
    if(data && data instanceof Array) {
        for(var i = 0, l = data.length; i<l; i++) {
            var o = document.createElement('div'); 
            o.className = data[i].Object + ' element';
            o.appendChild(document.createTextNode(data[i].Object));
            target.appendChild(o);
            precache(data[i].Child, o);
        } 
    }
}

function Lineal_Descendant(A, B) {
    var is = document.querySelectorAll('.'+B+' .'+A).length > 0;
    var resCtr = document.getElementById('result');
    var txt = document.createTextNode(A+' '+B+' is ' + (is + ""));
    resCtr.appendChild(txt);    
    resCtr.appendChild(document.createElement('br'));
    return is;
}

precache(data, document.getElementById('cache'))
    
Lineal_Descendant("Sedan","Civic")
Lineal_Descendant("Sedan","Toyota");