JSFiddle - React, Tailwind, and code Playground

by adeneo

JavaScript

var xml = '<Urunler><Urun><ID>1</ID><Parent>0</Parent><Name>Red</Name></Urun><Urun><ID>2</ID><Parent>0</Parent><Name>Green</Name></Urun><Urun><ID>3</ID><Parent>0</Parent><Name>Blue</Name></Urun><Urun><ID>4</ID><Parent>3</Parent><Name>Sky</Name></Urun><Urun><ID>5</ID><Parent>3</Parent><Name>Sea</Name></Urun><Urun><ID>6</ID><Parent>5</Parent><Name>Fish</Name></Urun><Urun><ID>7</ID><Parent>4</Parent><Name>Bird</Name></Urun></Urunler>';


xml = $.parseXML(xml);

var ul = $('<ul />');

$(xml).find('Urun').each(function(index, item) {
    var parent = parseInt( $(this).find('Parent').text() , 10 );
    var li     = $('<li />', {
        text : $(this).find('Name').text(),
        id   : $(this).find('ID').text()
    });
    
    if (parent !== 0) {
        var parentEl = ul.find('li#' + parent);
        
        if ( parentEl.find('ul').length === 0 ) 
            parentEl.append( $('<ul />') );
        
        parentEl.find('ul').append(li);
        
    } else {
        ul.append(li);
    }
   
});

$('body').append(ul)