JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="nested-list">
  <ul id="data-list">
  </ul>
</div>

JavaScript

$(document).ready(function() {
var jsondata = [
  {
  "data": [
    {
      "category": "Professional bodies",
      "links": [
        {
          "url": "https://acs.org.au",
          "text": "ACS"
        },
        {
          "url": "https://www.cpaaustralia.com.au/",
          "text": "CPA"
        }
      ]
    },
    {
      "category": "Search engines",
      "links": [
        {
          "url": "https://bing.com",
          "text": "Bing"
        },
        {
          "url": "https://google.com",
          "text": "Google"
        }
      ]
    },
    {
      "category": "Wolters Kluwer",
      "links": [
        {
          "url": "https://wolterskluwer.cchlearning.com.au/",
          "text": "CCH learning"
        }
      ]
    }
  ]
 } 
];

var dataList = $('#data-list');
});

  

  // Iterate through the top-level "data" array
  $.each(jsondata, 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);
  });