JSFiddle - React, Tailwind, and code Playground

by surftribe paolo

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="menu">
</ul>

CSS

.ui-menu {
    width: 150px;
}

JavaScript

var JSON = {
    menu: [
       {name: 'Pizza', link: '1', sub: [
            {name: 'Napoli', descrizione: 'Blall blaa', prezzo: '100', sub: null},
            {name: 'Margherita',descrizione: 'Blall blaa', prezzo: '100', sub: null},
            {name: 'Capricciosa',descrizione: 'Blall blaa', prezzo: '100', sub: null}
            ]},
        {name: 'Primi Piatti', descrizione: 'Blall blaa', prezzo: '100', sub: [
            {name: 'Matriciana',descrizione: 'Blall blaa', prezzo: '100', sub: null},
            {name: 'Carbonara',descrizione: 'Blall blaa', prezzo: '100', sub: null},
            {name: 'Lasagne',descrizione: 'Blall blaa', prezzo: '100', sub: null}
            ]},
        {name: 'Secondi Piatti Carne', descrizione: 'Blall blaa', prezzo: '100', sub: [
            {name: 'Braciola di maiale',descrizione: 'Blall blaa', prezzo: '100', sub: null},
            {name: 'Ossobuco',descrizione: 'Blall blaa', prezzo: '100', sub: null}
        ]},        
        {name: 'Dolci', link: '3',sub: [
            {name: 'Tiramisù',descrizione: 'Blall blaa', prezzo: '100', sub: null},
            {name: 'MonBlanck',descrizione: 'Blall blaa', prezzo: '100', sub: null}
            ]}
    ]
}

$(function () {     
    
    function parseMenu(ul, menu) {
	for (var i=0;i<menu.length;i++) {
		var li=$(ul).append('<li><b>'+i+' '+menu[i].name+'</b> '+menu[i].descrizione+' '+menu[i].prezzo+'</li>');
		if (menu[i].sub!=null) {
			var subul=$('<ul></ul>');
			$(li).append(subul);
			parseMenu($(subul), menu[i].sub);
		}
	}
}

var menu=$('#menu');
parseMenu(menu, JSON.menu);

 
 });