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

【问题标题】：how to read and show json 2d array using getJSON?如何使用 getJSON 读取和显示 json 二维数组？
【发布时间】：2019-01-29 09:16:59
【问题描述】：

我想读取 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>

【问题讨论】：

您缺少"sub" 循环

标签： javascript jquery json getjson

【解决方案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;
  }
});

【讨论】：

【解决方案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>

【讨论】：

【解决方案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);

【讨论】：