Populating HTML from JSON in jQuery not working

Question

I'm trying to build a simple menu from the JSON file.

I've been now trying for days to work out the correct logic and now I'm lost:

here's the logic:

$.ajax({
        url: 'data.json',
        cache: false,
        data: "",
        dataType: 'json',
        success: function (results) {
          return $.map(results.Menu, function(obj, i) {
            var menuTemplate = '';
            $.each(obj.menuTitle,function(k,l){
              console.log(obj.link);
                    menuTemplate += '<ul>';
                    menuTemplate += '<li>'+obj.menuTitle;
                     menuTemplate += '<div class="menuList">';
                     menuTemplate += '<div class="left">';
                     menuTemplate += '<ul>';
                     menuTemplate += '<li>'+obj.documentTitle[k]+'</li>';
                     menuTemplate += '</ul>';
                     menuTemplate += '</div>';
                     menuTemplate += '<div class="right">';
                     menuTemplate += '<ul class="region">';
                     menuTemplate += '<li><a href="'+obj.link+'">'+obj.link+'</a></li>'
                     menuTemplate += '</ul>';
                     menuTemplate += '</div>';
                     menuTemplate += '</div>';
                    menuTemplate += '</li>';
                    menuTemplate += '</ul>';
            });
            menuTemplate += "";
            return $('#menu2').append(menuTemplate);
          });
        }

    });

JSON:

{
    "Menu":{
        "fruit":{
            "menuTitle":["Fruits"],
            "documentTitle":["Apple, Pear"],
            "link":{
                "uk":["apple_uk.pdf", "pear_uk.pdf"],
                "europe":["apple_eu.pdf", "pear_eu.pdf"],
                "italy":["apple_it.pdf", "pear_it.pdf"],
                "germany":["apple_gr.pdf", "pear_gr.pdf"]
            }
        },
        "salad":{
            "menuTitle":["Salad"],
            "documentTitle":["Tomatoe","Paprika"],
            "link":{
                "uk":["tomatoe_uk.pdf", "paprika_uk.pdf"],
                "europe":["tomatoe_eu.pdf", "paprika_eu.pdf"],
                "italy":["tomatoe_it.pdf", "paprika_it.pdf"],
                "germany":["tomatoe_gr.pdf", "paprika_gr.pdf"]
            }
        }
    }
}

Here's the PLUNKR

Inside PLUNKR is code for it should look like when is populated by JSON. All I want to is to create a template, but is it not working for me :(

Please help me.

Many thanks in advance

Answer 1

First change all menu template string building to:

menuTemplate += '<ul>';
menuTemplate += '<li>'+obj.menuTitle;
menuTemplate += '<div class="menuList">';
menuTemplate += '<div class="left">';
menuTemplate += '<ul>';
$.each(obj.documentTitle, function(mainkey, title) {
  menuTemplate += '<li>'+title+'</li>';
});
menuTemplate += '</div>';
menuTemplate += '<div class="left">';
$.each(obj.link, function(region, files) {
  menuTemplate += '<ul class="region">';
    $.each(files, function(key, file) {
      menuTemplate += '<li>'+file+'</li>';
    });
  menuTemplate += '</ul>';
});
menuTemplate += '</div>';
menuTemplate += '</li>';
menuTemplate += '</ul>';

Second you have an error in your data json file, change this:

"documentTitle":["Apple, Pear"],

To this: "documentTitle":["Apple", "Pear"],