jQuery append element with object values

Question

I want to append a <ul> element depending on the values contained in the object option . I am looking to add in <li> elements under the top level <ul> and then if the object has another value contained under then add a child <ul> which contains further <li> elements and so on...

I have sorted out the first level to create an <li> for each first level option and however adding another .each() function creates a random [object Object] before and the sub options don't order as desired.

An suggestions how I can make this work as desired my example code is below.

<ul id="menu">
</ul>

<script>
var option = {
    'option 1' : {
        'option 1 sub option 1' : {},
        'option 1 sub option 2' : {},
        'option 1 sub option 3' : {}

    },
    'option 2' : {
        'option 2 sub option 1' : {},
        'option 2 sub option 2' : {}
    },

    'option 3' : {
        'option 3 sub option 1' : {},
        'option 3 sub option 2' : {}
    }
}

var menu = $('#menu'); // target menu container

$.each(option, function(key, value) {

$(menu).append('<li data-option="' + key + '">' + key +
(value === 'undefined' ? '' : '<ul class="menu2">'
+

// Add more <li> elements for each sub option contained under each option
$.each(value, function(key, value) {
    $('.menu2').append(key);
})

+ '</ul>') + 
'</li>');

});

</script>

Answer 1

Its a bit unclear to me what it is you want 100%, but try the following

var menu = $('#menu'); // target menu container
$.each(option, function(key, value) {
  var elem = "<li>" + key + "<ul>";
  $.each(value, function(i, x) {
    elem += "<li>" + i + "</li>"
  })
  elem += "</ul></li>"
  menu.append(elem);
});

Demo

 var option = { 'option 1': { 'option 1 sub option 1': {}, 'option 1 sub option 2': {}, 'option 1 sub option 3': {} }, 'option 2': { 'option 2 sub option 1': {}, 'option 2 sub option 2': {} }, 'option 3': { 'option 3 sub option 1': {}, 'option 3 sub option 2': {} } } var menu = $('#menu'); // target menu container $.each(option, function(key, value) { var elem = "<li>" + key + "<ul>"; $.each(value, function(i, x) { elem += "<li>" + i + "</li>" }) elem += "</ul></li>" menu.append(elem); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="menu"> </ul> 

Answer 2

If you only have 2 levels, Carsten's answer will work perfectly. Incase theres an arbitrary depth, you will need a recursive solution.

 var option = { 'option 1' : { 'option 1 sub option 1' : {}, 'option 1 sub option 2' : {}, 'option 1 sub option 3' : {} }, 'option 2' : { 'option 2 sub option 1' : {}, 'option 2 sub option 2' : {} }, 'option 3' : { 'option 3 sub option 1' : {}, 'option 3 sub option 2' : {} } } function buildList(ul,data){ for(var key in data){ var li = $('<li>'+key+'</li>') if(!jQuery.isEmptyObject(data[key])){ // checks if there is another <ul> necesarry var sub_ul = $('<ul></ul>') buildList(sub_ul,data[key]) // do the same for the sub-ul li.append(sub_ul) } ul.append(li) } } $(document).ready(function(){ buildList($('#list'),option) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="list"></ul> 

You can use it by calling buildList() and passing the target ul element in which the list should be put, and the data.