Javascript 循環執行順序錯誤

Question

我有一個function ，我想從一個array創建一個unordered list 。 該array是嵌套的，因此必須在新array啟動后創建另一個<ul> 。 function 可以工作，但只有一個問題： 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 的HTML是這樣的：

• Aanwezigen / afwezigen
• Toevoegingen 議程
• 更新 openstaande actiepunten
• Jaarrekening 2018
• 科門德時期
• Oplezen actiepunten
• 朗德弗拉格
• 營銷
  • 網站
  • 社交媒體
  • 新聞簡報
• 收購
  • 潛在客戶
  • 交易
  • 網絡
• 英庫普
  • 杠桿式
  • 瑪吉斯

如您所見，它將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 更改為數組之外，您還需要更改 function。

您的 function 應該如下所示。

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 2

使用 Javascript object。 像這樣迭代它：

 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 3

請注意，JSON 具有對象和 arrays，而 PHP 將兩者合並為一個類型。 JSON 不保留對象的順序； 如果您想要訂單，請務必使用 arrays（即在 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 中迭代。