How to create a sitemap using jquery?

1

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

1

<ul id="sitemap"></ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

$(document).ready(function() {
  // Define the sitemap structure as a JavaScript object
  var sitemapData = {
    "Home": "#",
    "About": "#about",
    "Services": "#services",
    "Contact": "#contact",
    "Products": {
      "Electronics": {
        "Computers": "#electronics/computers",
        "Phones": "#electronics/phones",
        "Accessories": "#electronics/accessories"
      },
      "Clothing": {
        "Men": "#clothing/men",
        "Women": "#clothing/women",
        "Kids": "#clothing/kids"
      },
      "Books": "#books"
    }
  };
  
  // Function to traverse the sitemap object and generate the HTML
  function generateSitemap(data, parent) {
    var ul = $("<ul>");
    $.each(data, function(key, value) {
      var li = $("<li>");
      var a = $("<a>").text(key).attr("href", value);
      li.append(a);
      if (typeof value === "object") {
        li.append(generateSitemap(value, ul));
      }
      ul.append(li);
    });
    return ul;
  }
  
  // Generate the sitemap HTML structure
  var sitemap = generateSitemap(sitemapData, $("#sitemap"));
  $("#sitemap").append(sitemap);
});