Creazione lista dinamicamente - jquery javascript

[tommy_2222]

Salve a tutti.
Supponendo che io abbia un array del tipo:

var cibo = [{
	name: 'pasta',
	price: 22
}, {
	name: 'pizza',
	price: 33
}, {
	name: 'insalata',
	price: 44
}];

come posso creare dinamicamente la lista:

<ul class="cibo">
	<li>pasta: 22</li>
	<li>pizza: 33/li>
	<li>insalata: 44</li>
</ul>

?

[Studente Anonimo]

Ciao, con jQuery è abbastanza semplice. Crei un elemento

, poi basta ad esempio usare la funzione

$.each()

sul tuo array, creando all'interno del ciclo di volta in volta un elemento

che abbia per contenuto

value.name + ': ' + value.price

value è chiaramente l'elemento corrente dell'array.

Qualcosa del tipo:

var cibo, li, ul;

cibo = [{
    name: 'pasta',
    price: 22
}, {
    name: 'pizza',
    price: 33
}, {
    name: 'insalata',
    price: 44
}];

ul = $('<ul>', {
    'class': 'cibo'
});

$.each(cibo, function (index, value) {
    li = $('<li>').append(value.name + ': ' + value.price);
    ul.append(li);
});

$('body').append(ul);

Demo: http://jsfiddle.net/nivit/4m9f7jvg/