如何使用 jQuery 創建帶有 JSON 輸入的 ul-li 結構？

Question

我有一個 JSON 變量：

var links=[{"text":"Home","href":"http://home.com","icon":"fas fa-home","target":"_top","title":"My Home","children":[{"text":"home2","href":"home2.com","icon":"fas fa-chart-bar","target":"_self","title":"home2","category":"home2"},{"text":"home3","href":"home3.com","icon":"fas fa-bell","target":"_self","title":"home3","category":"home3"}]},{"text":"about us","href":"aboutus.COM","icon":"fas fa-crop","target":"_self","title":"about us","category":"about us"},{"text":"learning","href":"learning.com","icon":"fas fa-flask","target":"_self","title":"learning","children":[{"text":"learning2","href":"learning2.com","icon":"fas fa-map-marker","target":"_self","title":"learning2","category":"learning2"},{"text":"learning3","href":"learning3.com","icon":"fas fa-plug","target":"_self","title":"learning3","category":"learning3"},{"text":"learning4","href":"learning4.com","icon":"fas fa-search","target":"_blank","title":"learning4","category":"learning4"}],"category":"learning"},{"text":"map","href":"map.com","icon":"fas fa-filter","target":"_self","title":"map","category":"map"}];

我想為帶有 ul/li 結構的網站創建一個菜單，使用 jQuery 頂部變量。

我嘗試使用這部分代碼，但這不起作用。

function Count(links){
            let Count=0;
            $.each(links ,function(key,val){
                Count++;
            });
            return Count;
        }

        function getMenu(links){

            $("<ul></ul>",{
                "class":"ulTest"
             }).appendTo('div.test');

            $.each(links ,function(key,val){

               var childCount=Count(val.children) ;
               if (childCount) {

                  getMenu(val.children);

               }else{

                 $('<li class="liClass"><a class="'+val.icon+'" href="'+val.menuLink+'">'+val.menuName+'</a></li>').appendTo('ul.ulTest');

               }
            });
        }

getMenu(links);

我很迷惑。

Answer 1

嘗試這個：

/**
 * Build your menu and call self to build submenu.
 *
 * @param  Array data
 * @return Element
 */
function buildMenu(data){
  var menu = document.createElement('ul'); // createing <ul> element

  for(var i=0; i<data.length; i++){ // processing array
    var link = data[i];

    var li = document.createElement('li'), // creating <li> element
        a  = document.createElement('a');  // creating <a> element

    li.classList.add('liClass'); // adding class to <li> element
    a.className += link.icon; // adding multiple classes to <a> element
    a.setAttribute('href', link.href); // setting [href] attribute
    a.innerText = link.text; // setting text

    li.appendChild(a); // appending <a> element inside <li>
    menu.appendChild(li); // appending <li> inside <ul>

    if(link.children){ // checking childrens (you dont need to creating Count function, all JS arrays has property length (example: links.length))
      var subMenu = buildMenu(link.children) // creating submenu
      li.appendChild(subMenu) // appending sub menu to <li> element
    }
  }

  return menu;
}

var div  = document.querySelector('div.test') // getting your div
var menu = buildMenu(links); // build menu

div.appendChild(menu) // append menu to your div