jQuery: pls help with generating nested lists

JavaScript
1

what I need to generate
(inserting this into existing empty <ul>, so need to start by inserting top-level <li>):

  <li>camera
        <ul>
            <li>price: $890.00</li>
            <li>brand: Nikon</li>
            <li>model: D700</li>
        </ul>
    </li>
    <li>laptop
        <ul>
            <li>price: $980.00</li>
            <li>brand: Toshiba</li>
            <li>model: L989</li>
        </ul>
    </li>
   etc.....

for some reason, this code

$.each(prod, function(propKey,propVal) {
	
	$('ul#prodsAll').append('<li>' + propKey + ':<ul>');
	
		$.each(propVal, function(propKey2,propVal2) {
			$('#prodsAll').append('<li>' + propKey2 + ': ' + propVal2  + '</li>');
		});
		$('#prodsAll ul').append('</ul></li>');
	});
});

is generating this:


<ul id="prodsAll">
	<li>
	camera:
	<ul></ul>
	</li>
	<li>price: $890.00</li>
	<li>brand: Nikon</li>
	<li>model: D700</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

would appreciate suggestions… thank you…

2

Hi Maya,

Seems like you are reading your values from some JSON or something.
Could you supply that, please.

E.g. it would help to know what prod is in this line:

$.each(prod, function(propKey,propVal) {
3

yes I’m reading from JSON…

but well, I found solution:

var content = '';
$.each(data.products, function(index,prod) {
	
	$.each(prod, function(propKey,propVal) {
		
		content += '<li>' + propKey + ':<ul>';
		
		$.each(propVal, function(propKey2,propVal2) {
			content += '<li>' + propKey2 + ': ' + propVal2  + '</li>';
		});
		content += '</ul></li>';
	});
});
$('ul#prodsAll').append(content);

it was not a question of whether data was coming from JSON or not… I was just not doing it right…:wink:

thank you…