Javascript 循环以错误的顺序执行

Question

我有一个 function，我想从 array 创建一个 unordered list。 array 是嵌套的，因此必须在新的 array 启动后创建另一个 <ul>。该功能有效，但只有一个问题：unordered list 没有以正确的顺序显示。我不知道为什么，因为我在 PHP 中制作了相同的 function 并且它以正确的顺序显示。 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
Toevoegingen 议程
更新 openstaande actiepunten
Jaarrekening 2018
Komende periode
积极行动
Rondvraag
营销
- 网站
- 社交媒体
- 新闻简报
收购
- 潜在客户
- 优惠
- 网络
Inkoop
- 杠杆率
- 玛吉斯

如您所见，它会将 if-statement 中生成的 HTML 放在 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

请注意 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 中迭代。

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

使用 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>

Javascript 循环以错误的顺序执行

Javascript loop executes in the wrong order

javascript

arrays

nested-loops

html-lists