Консолидация JSON объектов в одном неупорядоченном списке

Question

Я работаю с AJAX, JSON и jQuery / JavaScript, чтобы попытаться создать иерархическое навигационное меню: Категории / Разделы / Статьи

Все элементы, которые должны появиться в меню хранятся в виде объектов в 3 отдельных JSON файлах (один файл для категорий, один для разделов и один для статей). Я полагаюсь на 3 отдельных вызова AJAX, чтобы захватить объекты в файлах JSON и затем разместить их как элементы с гиперссылками в трех соответствующих неупорядоченных списках: категории, разделы, статьи.

Передо мной стоит много проблем продолжая свои усилия по созданию навигационного меню, но я думаю, что следующий шаг - выяснить, как получить все JSON объекты для публикации в ОДНОМ неупорядоченном списке в моем HTML, а не в отдельном списке для каждого из 3 AJAX звонков. (Это должно упростить мне начало сортировки элементов, чтобы меню имело правильную структуру. Например, мне в конечном итоге потребуется, чтобы каждый раздел располагался ниже категории, являющейся его фактическим родителем.) Надеемся, что кто-то может руководить мне о том, как настроить мой код здесь.

Мои AJAX звонки ниже. Хотел бы для всех 3 вызовов сбросить объекты JSON в ТО ЖЕ неупорядоченный список. В настоящее время - объекты попадают в 3 отдельных списка. Большое спасибо заранее.

 $.ajax({
  url: 'https://myURL/categories.json',
  dataType: 'json',
  type: 'get',
  cache: 'false',
  success: function(data) {
    let $ul = $('<ul id="categories" />');
    let html = data.categories.map(c => `<li class="cat"><a href="${c.html_url}">${c.name}</a></li>`);
    $ul.append(html).appendTo('#testnav');
  }
  });

$.ajax({
  url: 'https://myURL/sections.json',
  dataType: 'json',
  type: 'get',
  cache: 'false',
  success: function(data) {
    let $ul = $('<ul id="sections" />');
    let html = data.sections.map(s => `<li class="sec" categoryID=${s.category_id}><a href="${s.html_url}">${s.name}</a></li>`);
    $ul.append(html).appendTo('#testnav');
  }
  });

  $.ajax({
  url: 'https://myURL/articles.json',
  dataType: 'json',
  type: 'get',
  cache: 'false',
  success: function(data) {
    let $ul = $('<ul id="articles" />');
    let html = data.articles.map(a => `<li class="art" sectionID=${a.section_id}><a href="${a.html_url}">${a.name}</a></li>`);
    $ul.append(html).appendTo('#testnav');
  }
  });