JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<div id="nested-list">
  <ul id="data-list">
  </ul>
</div>

JavaScript

$(document).ready(function() {
  $.getJSON("https://zauaedudamedia.blob.core.windows.net/tst/au_usefullinks.json", function(data) {
    var dataList = $('#data-list');

    // Iterate through the top-level "data" array
    $.each(data.data, function(index, categoryData) {
      // Create a list item for the category
      var categoryItem = $('<li>').text(categoryData.category);
      var linksList = $('<ul>'); // Create an inner list for links

      // Iterate through the "links" array for this category
      //$.each(categoryData.links, function(index, linkData) {
        // Create list items for each link
        //var linkItem = $('<li>');
        //var link = $('<a>').attr('href', linkData.url).text(linkData.text);

        //linkItem.append(link);
        //linksList.append(linkItem);
      });

      // Append the category and its links to the top-level list
      categoryItem.append(linksList);
      dataList.append(categoryItem);
    });
  });
});