JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<div id="container"></div>

CSS

ul{
    padding-left:10px;
}

JavaScript

$.ajax({
    url:'/echo/xml/',
    data: {xml:'<root><category><catId>96</catId><title>News</title></category><category><catId>97</catId><title>Articles</title><category><catId>101</catId><title>Destinations</title></category><category><catId>102</catId><title>Epics</title></category></category><category><catId>129</catId><title>Tuesday Night Bouldering</title></category></root>'},
    dataType: 'xml',
    type:'post',
    success: function(data){
        var xml = $(data);
        $('#container').append( CategoryToUl(xml.children()) );
    }
});

function CategoryToUl(xml){
    var categories = xml.children('category');
    if (categories.length > 0)
    {
        var ul = $('<ul/>');
        categories.each(function(){
            var $this = $(this);
            var li = $('<li/>');
            var a = $('<a/>',{
                text: $this.children('title').text(),
                href: '#' + $this.children('catId').text()
            });
            li.append(a);
            li.append( CategoryToUl( $this ) );
            ul.append(li);
        });
        return ul;
    }
    return null;
}