如何通过javascript获取下属列表

Question

我有问题。我从Firestore数据库获取接收信息。我想显示此信息。第一个功能getOrders(...)显示父信息，例如“所有商品”，“日期”，“金额”。功能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>

我的想法是在showOrders(...)和showOrders(...)中拆分函数showOrdersDetails(...)。但是我不知道如何创建下级li元素。 （可能我的想法不好，而您的想法更好）。我希望你能帮助我。我很高兴阅读一些答案！ ：） 提前致谢。

index.html

<ul id="list">

</ul>

script.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

请参见Nesting a list中的ul: The Unordered List element 部分

子列表应位于单个列表项的内部（对于您的订单而言）。

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