Цикл Javascript выполняется в неправильном порядке

Question

У меня есть function, где я хочу создать unordered list из array. array является вложенным, поэтому после запуска array необходимо создать еще один <ul>. Функция работает, но есть только одна проблема: unordered list не отображается в правильном порядке. Я не знаю почему, потому что я сделал то же самое function в PHP, и там это отображается в правильном порядке. array выглядит следующим образом:

 $topics = [
     'Aanwezigen / afwezigen',
     'Toevoegingen agenda',
     'Update openstaande actiepunten',
     'Marketing' => [
        'Website',
        'Social media',
        'Nieuwsbrief',
     ],
     'Acquisitie' => [
        'Leads',
        'Deals',
        'Netwerk',
     ],
     'Inkoop' => [
        'Leveranciers',
        'Marges',
     ],
     'Jaarrekening 2018',
     'Komende periode',
     'Oplezen actiepunten',
     'Rondvraag',
];

Это мой Javascript function:

let HTML = "<ul>";

for (const [key, value] of topics) {
  if (Array.isArray(value)) {
    HTML = HTML + "<li>" + key + "</li>";

    for (let i = 0; i < value.length; i++) {
      HTML = HTML + "<ul>";
      HTML = HTML + "<li>" + value[i] + "</li>";
      HTML = HTML + "</ul>";
    }
  } else {
    HTML = HTML + "<li>" + value + "</li>";
  }
}

Вывод HTML таков:

• Aanwezigen / afwezigen
• Повседневная повестка дня
• Обновление openstaande actiepunten
• Jaarrekening 2018
• Период Komende
• Oplezen actiepunten
• Rondvraag
• Маркетинг
  • Веб-сайт
  • Социальные сети
  • Nieuwsbrief
• Acquisitie
  • Leads
  • Предложения
  • Netwerk * ​​1052 *
• Inkoop
  • Leveranciers
  • Marges

Как вы можете видеть, он помещает HTML, сгенерированный в if-statement, в конец unordered list, тогда как это не должно быть. Любой совет, как решить эту проблему? Или любое объяснение, почему оно не работает так же, как в PHP?

Обновление:

Когда я console.log * array topics это выглядит так:

(10) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
0: (2) ["0", "Aanwezigen / afwezigen"]
1: (2) ["1", "Toevoegingen agenda"]
2: (2) ["2", "Update openstaande actiepunten"]
3: (2) ["3", "Jaarrekening 2018"]
4: (2) ["4", "Komende periode"]
5: (2) ["5", "Oplezen actiepunten"]
6: (2) ["6", "Rondvraag"]
7: Array(2)
0: "Marketing"
1: (3) ["Website", "Social media", "Nieuwsbrief"]
length: 2
__proto__: Array(0)
8: Array(2)
0: "Acquisitie"
1: (3) ["Leads", "Deals", "Netwerk"]
length: 2
__proto__: Array(0)
9: Array(2)
0: "Inkoop"
1: (2) ["Leveranciers", "Marges"]
length: 2
__proto__: Array(0)
length: 10
__proto__: Array(0)

Answer 1

Использовать объект Javascript. Повторяйте это так:

let data = {
  topics: [{
      name: 'Aanwezigen/afwezigen'
    },
    {
      name: 'Toevoegingen agenda'
    },
    {
      name: 'Update openstaande actiepunten'
    },
    {
      name: 'Marketing',
      subtopics: [
        'Website',
        'Social media',
        'Nieuwsbrief',
      ]
    },
    {
      name: 'Acquisitie',
      subtopics: [
        'Leads',
        'Deals',
        'Netwerk',
      ]
    },
    {
      name: 'Inkoop',
      subtopics: [
        'Leveranciers',
        'Marges',
      ]
    },
    {
      name: 'Jaarrekening 2018'
    },
    {
      name: 'Komende periode'
    },
    {
      name: 'Oplezen actiepunten'
    },
    {
      name: 'Rondvraag'
    }
  ]
};

let container = document.getElementById('container');

const topics = data.topics;

if (topics) {
  var list = '<ul class="list">';
  topics.forEach(function(topic) {
    list = list + "<li>" + topic.name + "</li>";
    if (topic.hasOwnProperty('subtopics')) {
      var sublist = '<ul class="sublist">';
      var subtopics = topic.subtopics;
      for (var i = 0; i < subtopics.length; i++) {
        sublist = sublist + '<li>' + subtopics[i] + '</li>';
      };
      sublist = sublist + '</ul>';
    } else {
      var sublist = '';
    }
    list = list + sublist;
  });
  list = list + '</ul>';
  container.innerHTML = list;
} else {
  container.innerHTML = '<p>There are no topics</p>';
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div id="container"></div>

Answer 2

Вам также нужно изменить свою функцию, кроме изменения данных с json на массив.

Ваша функция должна выглядеть примерно так:

for (const value of topics) {

  if (Array.isArray(value) && value.length > 1) {
    HTML = HTML + "<li>" + value[0] + "</li>";

    for (let i = 0; i < value[1].length; i++) {
      HTML = HTML + "<ul>";
      HTML = HTML + "<li>" + value[1][i] + "</li>";
      HTML = HTML + "</ul>";
    }
  } else {
    HTML = HTML + "<li>" + value[0] + "</li>";
  }
}

Answer 3

Имейте в виду, что JSON имеет объекты и массивы, тогда как PHP объединяет их в один тип. JSON не сохраняет порядок объектов;если вы хотите порядок, обязательно используйте массивы (т.е. используйте последовательные числовые индексы в PHP, без строковых ключей). Это потребует реструктуризации вашего массиваНапример, список элементов, где каждый элемент состоит из имени и списка дочерних элементов:

$topics = [
     ['Aanwezigen / afwezigen'],
     ['Toevoegingen agenda'],
     ['Update openstaande actiepunten'],
     ['Marketing', [
        'Website',
        'Social media',
        'Nieuwsbrief',
     ]],
     ['Acquisitie', [
        'Leads',
        'Deals',
        'Netwerk',
     ]],
     ['Inkoop', [
        'Leveranciers',
        'Marges',
     ]],
     ['Jaarrekening 2018'],
     ['Komende periode'],
     ['Oplezen actiepunten'],
     ['Rondvraag'],
];

Эта структура сохранит порядок и ее легко будет перебрать в JavaScript.