如何通過 javascript 獲取下級列表

Question

我有個問題。 我從我的 firestore 數據庫中獲取接收信息。 我希望顯示此信息。 第一個 function getOrders(...)顯示父信息，例如“All Prouct”、“Date”、“Amount”。 function getOrdersDetail(...)顯示下屬信息。 因此，每個訂單都有其訂單詳情。 我不想在列表中顯示這些信息。

例如

<ul id="list">
        <li>Order 1</li>
        <ul>
            <li>Information 1</li>
            <li>Information 2</li>
        </ul>
        <li>Order 1</li>
        <ul>
            <li>Information 1</li>
        </ul>
    </ul>

我的想法是將 function showOrders(...)拆分為 showOrders showOrders(...)和showOrdersDetails(...) 。 但我不知道如何創建從屬 li 元素。 （願我的idea不好，你有更好的idea）。 我希望你能幫助我。 我很樂意閱讀一些答案：。）提前致謝。

索引.html

<ul id="list">

</ul>

腳本.js

 function showOrdersDetail(produkt, datum, summe) {
      var text = produkt + " " + datum + " " + summe;
      listNode = document.getElementById('test'),
      liNode = document.createElement("li"),
      txtNode = document.createTextNode(text),

      liNode.appendChild(txtNode);
      listNode.appendChild(liNode);

    }

/**
 * Get all orders of the user
 * @param {user.uid} userid 
 */

    function getOrders(userid) {
      db.collection("users").doc(userid).collection("bestellungen").get().then(function(querySnapshot) {
        if(querySnapshot.empty) {
          console.log("empty");
        }  
        else {
          querySnapshot.forEach(function(doc) {
            showOrders(doc.data().produkte, doc.data().datum, doc.data().summe)
            //console.log(doc.id, " => ", doc.data());
            console.log(doc.id);
            //console.log(doc.data().datum);

            //console.log(doc.data().produkte);

            //console.log(doc.data().summe);
            getOrdersDetail(doc.id, userid);        
        });    
        }
    });
    }

    function getOrdersDetail(docid, userid) {
      db.collection("users").doc(userid).collection("bestellungen").doc(docid).collection("gesamtbestellungen").get().then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
          console.log(doc.id, " => ", doc.data());
          //console.log(doc.data().produkt);
          //console.log(doc.data().preis);
          //console.log(doc.data().anzahl);
          //console.log(doc.data().summe);

        });    
      });
    }

Answer 1

請參閱在 ul 中Nesting a list部分：無序列表元素

子列表應位於單個列表項內（在您的情況下為訂單）。

 <ul> <li>first item</li> <li>second item <,-- Look, the closing </li> tag is not placed here! --> <ul> <li>second item first subitem</li> <li>second item second subitem <!-- Same for the second nested unordered list! --> <ul> <li>second item second subitem first sub-subitem</li> <li>second item second subitem second sub-subitem</li> <li>second item second subitem third sub-subitem</li> </ul> </li> <!-- Closing </li> tag for the li that contains the third unordered list --> <li>second item third subitem</li> </ul> <!-- Here is the closing </li> tag --> </li> <li>third item</li> </ul>