如何使用getJSON读取和显示json二维数组？

Question

I want to read the 2D JSON

JSON file example -

[
   {
      "name":"메뉴1",
      "permission":"1",
      "link":"http://naver.com"
   },
   {
      "name":"메뉴2",
      "permission":"2",
      "link":"http://daum.net",
      "sub":[
         {
            "name":"메뉴2-1",
            "permission":"1",
            "link":"http://google.com"
         },
         {
            "name":"메뉴2-2",
            "permission":"1",
            "link":"http://yahoo.com"
         }
      ]
   }
]

I want to put a secondary menu at the bottom of the primary menu. I know how to show 1d array but I can't show 2d array. Please help me.

<script >
    $(document).ready(function() {
        {
            $.getJSON('./inc/menu.json', function(data) {
                var html = '';
                html += '<ul>';
                $.each(data, function(entryIndex, entry) {
                    html += '<li><a href=' + entry.link + ' title=' + entry.permission + '>' + entry.name + '</a></li>';
                });
                html += '</ul>';
                console.log(html);
                $("nav").html(html);
            });
            return false;
        }
    }); 
</script>

Answer 1

Try this?

$(document).ready(function() {
  {
    $.getJSON('./inc/menu.json', function(data) {
      var html = '';
      html += '<ul>';
      $.each(data, function(entryIndex, entry) {
          if(entry.sub && entry.sub.length > 0) {
            html += '<li><ul>';
            $.each(entry.sub, function(key, val) {
               html += '<li><a href=' + val.link + ' title=' + val.permission  + '>' + val.name + '</a></li>';
            });
            html += '</ul></li>';
         } else {
            html += '<li><a href=' + entry.link + ' title=' + entry.permission  + '>' + entry.name + '</a></li>';
        }
      });
      html += '</ul>';
      console.log(html);
      $("nav").html(html);
    });
    return false;
  }
});

Answer 2

You could use Array#map and Array#join instead of $.each. I find it much more readable (subjective).

Also using, destructuring and spread syntax.

 const data=[{"name":"메뉴1","permission":"1","link":"http://naver.com"},{"name":"메뉴2","permission":"2","link":"http://daum.net","sub":[{"name":"메뉴2-1","permission":"1","link":"http://google.com"},{"name":"메뉴2-2","permission":"1","link":"http://yahoo.com"}]}] function generateHTML({link,permission,name}, sub) { return ` <li> <a href="${link}" title="${permission}"> ${name} </a> ${sub||""} </li> ` } const res = data.map(item => { let sub = ""; if (item.sub) { sub = `<ul>${item.sub.map(ele=>generateHTML(ele)).join("")}</ul>` } return generateHTML(item, sub); }).join(""); $("nav").html(`<ul>${res}</ul>`); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav></nav> 

Alternative recursive version (works with any depth of sub elements):

 const data = [{"name":"메뉴1","permission":"1","link":"http://naver.com"},{"name":"메뉴2","permission":"2","link":"http://daum.net","sub":[{"name":"메뉴2-1","permission":"1","link":"http://google.com"},{"name":"메뉴2-2","permission":"1","link":"http://yahoo.com","sub":[{"name":"메뉴2-2-1","permission":"1","link":"http://google.com"},{"name":"메뉴2-2-2","permission":"1","link":"http://yahoo.com"}]}]}] function generateHTML({link,permission,name, sub}) { return ` <li> <a href="${link}" title="${permission}"> ${name} </a> ${sub ? `<ul>${sub.map(generateHTML).join("")}</ul>` : ""} </li> ` } const res = data.map(generateHTML).join(""); $("nav").html(`<ul>${res}</ul>`); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav></nav> 

Answer 3

Try this

 const jsonArr = 
 [
  {
    "name" : "메뉴1", 
    "permission" : "1", 
    "link" : "http://naver.com"
  },
  {
    "name" : "메뉴2", 
    "permission" : "2", 
    "link" : "http://daum.net", 
  "sub" : 
     [
         {
            "name" : "메뉴2-1", 
            "permission" : "1", 
            "link" : "http://google.com"
         },
         {
            "name" : "메뉴2-2", 
            "permission" : "1", 
            "link" : "http://yahoo.com"
         }
      ]
  }
];
var html = '';
html += '<ul>';
$.each(jsonArr, function (index, value) {
   html += '<li><a href=' + value.link + ' title=' + value.permission  + '>' + 
   value.name + '</a></li>';
   if (value.sub && value.sub.length > 0) {
     html += '<ul>';
     $.each(value.sub, function (index_sub, value_sub) {
        html += '<li><a href=' + value_sub.link + ' title=' + value_sub.permission  + 
        '>' + value_sub.name + '</a></li>';
     });
     html += '</ul>';
   }
});
 html += '</ul>';
 $("nav").html(html);