recursive function to generate nested list

Question

I got this code to generate a nested list using jQuery:

HTML and JavaScript

jQuery(document).ready(function () {
	 var data = [
                { "id": "88", "name": "test", "parent_id": "0" },
                { "id": "8805", "name": "dsdsdsdsdsd", "parent_id": "88" },
                { "id": "8801", "name": "balloons", "parent_id": "88" },
                { "id": "8802", "name": "Other", "parent_id": "88" },
                { "id": "8804", "name": "Parac", "parent_id": "88" },
                { "id": "8803", "name": "Parts 11.02.", "parent_id": "88" },
                { "id": "880100", "name": "(2007-) airs", "parent_id": "8801" },
                { "id": "880110", "name": "(-2006) Glis", "parent_id": "8801" },
                { "id": "880190", "name": "(-2006) Other", "parent_id": "8801" }
            ];
 
 var endMenu = getMenu("0");

            function getMenu(parentId) {

                return data.filter(function (node) { return (node.parent_id === parentId); }).sort(function (a, b) { return a.index > b.index }).map(function (node) {
                    var exists = data.some(function (childNode) { return childNode.parent_id === node.id; });
                    //console.log("exists is now " + exists);
                    var subMenu = (exists) ? '<ul>' + getMenu(node.id).join('') + '</ul>' : "";
                    //console.log("node name is now " + subMenu);
                    return '<li><a href="#">' + node.name + subMenu + '</a></li>';
                });
            }
            $('.menu').html('<ul class="products">' + endMenu.join('') + '</ul>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu"></div>

The issue I am having is that the code generates a few empty a tag elements as follows:

<ul><a href="#"></a><li>

I have tried to step through the code but cant figure out where the issue is.

Taplar · Accepted Answer · 2018-05-03 21:54:34Z

It may be related to you appending the submenu inside the a tag. I moved the appending of the submenu after the link and it stopped putting the empty link in there.

jQuery(document).ready(function() {
  var data = [{
      "id": "88",
      "name": "test",
      "parent_id": "0"
    },
    {
      "id": "8805",
      "name": "dsdsdsdsdsd",
      "parent_id": "88"
    },
    {
      "id": "8801",
      "name": "balloons",
      "parent_id": "88"
    },
    {
      "id": "8802",
      "name": "Other",
      "parent_id": "88"
    },
    {
      "id": "8804",
      "name": "Parac",
      "parent_id": "88"
    },
    {
      "id": "8803",
      "name": "Parts 11.02.",
      "parent_id": "88"
    },
    {
      "id": "880100",
      "name": "(2007-) airs",
      "parent_id": "8801"
    },
    {
      "id": "880110",
      "name": "(-2006) Glis",
      "parent_id": "8801"
    },
    {
      "id": "880190",
      "name": "(-2006) Other",
      "parent_id": "8801"
    }
  ];

  var endMenu = getMenu("0");

  function getMenu(parentId) {
    var children = data.filter(function(node) {
      return (node.parent_id === parentId);
    });

    return children.map(function(node) {
      var subMenu = '';

      if (data.find(function(potentialChild) {
          return potentialChild.parent_id === node.id
        })) {
        subMenu = '<ul>' + getMenu(node.id).join('') + '</ul>';
      }

      return '<li><a href="#">'+ node.name +'</a>'+ subMenu +'</li>';
    });
  }
  $('.menu').html('<ul class="products">' + endMenu.join('') + '</ul>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu"></div>

Collectives™ on Stack Overflow

recursive function to generate nested list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related