如何用getJSON读取和显示json 2d数组？

Question

我想读2D JSON

JSON文件示例-

[
   {
      "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"
         }
      ]
   }
]

我想把二级菜单放在主菜单的底部。我知道如何显示一维阵列，但我不能显示二维阵列。请帮帮我。

<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

尝尝这个?

$(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

您可以使用Array#map和Array#join而不是$.each。我发现它更具可读性(主观性)。

也使用，解构和传播语法。

​

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>

​

另一个递归版本(适用于任何深度的子元素)：

​

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

尝尝这个

 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);