javascript - 动态创建的表 - 仅 Vanilla Javascript - 不在浏览器中显示

Question

我有一个功能可以遍历项目及其数量并对其进行排序，并且应该将它们显示在表格中。

DOM 或浏览器中没有显示任何内容。是我调用的函数有误还是什么？

我有一个使用脚本链接到我的 index.js 文件的 index.html 文件。

chrome 开发工具中没有显示任何错误。

说明

通过调用以下方法显示货架和元素配对

function displayShelfItemPair(shelfName, itemName);

function main() {

  let yesterdaysOrders = [

      {
        id: 1,
        orderLines: [{
            itemName: "Item 01",
            quantity: 1
          },
          {
            itemName: "Item 02",
            quantity: 3
          },
          {
            itemName: "Item 03",
            quantity: 25
          },
          {
            itemName: "Item 04",
            quantity: 12
          },
        ],
      },
      {
        id: 2,
        orderLines: [{
            itemName: "Item 01",
            quantity: 1
          },
          {
            itemName: "Item 08",
            quantity: 42
          },
          {
            itemName: "Item 09",
            quantity: 13
          },
          {
            itemName: "Item 12",
            quantity: 37
          },
        ],
      },
      {
        id: 3,
        orderLines: [{
          itemName: "Item 12",
          quantity: 16
        }, ],
      },
      {
        id: 4,
        orderLines: [{
            itemName: "Item 10",
            quantity: 11
          },
          {
            itemName: "Item 11",
            quantity: 10
          },
        ],
      },
      {
        id: 5,
        orderLines: [{
            itemName: "Item 06",
            quantity: 7
          },
          {
            itemName: "Item 07",
            quantity: 2
          },
          {
            itemName: "Item 12",
            quantity: 14
          },
        ],
      },
      {
        id: 6,
        orderLines: [{
          itemName: "Item 05",
          quantity: 17
        }, ],
      },
      {
        id: 7,
        orderLines: [{
            itemName: "Item 03",
            quantity: 5
          },
          {
            itemName: "Item 07",
            quantity: 2
          },
        ],
      },
      {
        id: 8,
        orderLines: [{
            itemName: "Item 02",
            quantity: 13
          },
          {
            itemName: "Item 07",
            quantity: 7
          },
          {
            itemName: "Item 09",
            quantity: 2
          },
        ],
      },
      {
        id: 9,
        orderLines: [{
            itemName: "Item 01",
            quantity: 4
          },
          {
            itemName: "Item 06",
            quantity: 17
          },
          {
            itemName: "Item 07",
            quantity: 3
          },
        ],
      },
      {
        id: 10,
        orderLines: [{
            itemName: "Item 11",
            quantity: 12
          },
          {
            itemName: "Item 12",
            quantity: 1
          },
        ],
      }
    ],
    result = Array.from(
      yesterdaysOrders.reduce((acc, {
        orderLines
      }) => {
        orderLines.forEach(({
          itemName,
          quantity
        }) => acc.set(itemName, (acc.get(itemName) || 0) + quantity));
        return acc;
      }, new Map), ([itemName, quantity]) => ({
        itemName,
        quantity
      }));



  result.sort((a, b) => {
    if (a.quantity > b.quantity) {
      return -1;
    } else if (a.quantity < b.quantity) {
      return 1;
    } else {
      return 0;
    }

  });

  function displayShelfItemPair(shelfName, itemName) {

    let table = document.createElement('table');

    document.body.appendChild(table); 

    for (let r in row) {

      let tr = document.createElement('tr'); 

      table.appendChild(tr); // Append to <table> node

      for (let c in cell) {

        let tdElement = document.createElement('td');

        tdElement.innerHTML = result[i][j];

        tr.appendChild(tdElement);

      }


    }

  console.log(displayShelfItemPair(shelfName, itemName));

  }
  
}

main();

期望的输出

ShelfName | itemName (w/quantity) 1 Item 12: 68<br/> 2 '' '' '' '' ''

Answer 1

您正在遍历不存在的对象。例如，for (let r in row) 没有row。我重写了函数，希望能让您更接近。

function main() {

  let yesterdaysOrders = [

      {
        id: 1,
        orderLines: [{
            itemName: "Item 01",
            quantity: 1
          },
          {
            itemName: "Item 02",
            quantity: 3
          },
          {
            itemName: "Item 03",
            quantity: 25
          },
          {
            itemName: "Item 04",
            quantity: 12
          },
        ],
      },
      {
        id: 2,
        orderLines: [{
            itemName: "Item 01",
            quantity: 1
          },
          {
            itemName: "Item 08",
            quantity: 42
          },
          {
            itemName: "Item 09",
            quantity: 13
          },
          {
            itemName: "Item 12",
            quantity: 37
          },
        ],
      },
      {
        id: 3,
        orderLines: [{
          itemName: "Item 12",
          quantity: 16
        }, ],
      },
      {
        id: 4,
        orderLines: [{
            itemName: "Item 10",
            quantity: 11
          },
          {
            itemName: "Item 11",
            quantity: 10
          },
        ],
      },
      {
        id: 5,
        orderLines: [{
            itemName: "Item 06",
            quantity: 7
          },
          {
            itemName: "Item 07",
            quantity: 2
          },
          {
            itemName: "Item 12",
            quantity: 14
          },
        ],
      },
      {
        id: 6,
        orderLines: [{
          itemName: "Item 05",
          quantity: 17
        }, ],
      },
      {
        id: 7,
        orderLines: [{
            itemName: "Item 03",
            quantity: 5
          },
          {
            itemName: "Item 07",
            quantity: 2
          },
        ],
      },
      {
        id: 8,
        orderLines: [{
            itemName: "Item 02",
            quantity: 13
          },
          {
            itemName: "Item 07",
            quantity: 7
          },
          {
            itemName: "Item 09",
            quantity: 2
          },
        ],
      },
      {
        id: 9,
        orderLines: [{
            itemName: "Item 01",
            quantity: 4
          },
          {
            itemName: "Item 06",
            quantity: 17
          },
          {
            itemName: "Item 07",
            quantity: 3
          },
        ],
      },
      {
        id: 10,
        orderLines: [{
            itemName: "Item 11",
            quantity: 12
          },
          {
            itemName: "Item 12",
            quantity: 1
          },
        ],
      }
    ],
    result = Array.from(
      yesterdaysOrders.reduce((acc, {
        orderLines
      }) => {
        orderLines.forEach(({
          itemName,
          quantity
        }) => acc.set(itemName, (acc.get(itemName) || 0) + quantity));
        return acc;
      }, new Map), ([itemName, quantity]) => ({
        itemName,
        quantity
      }));



  result.sort((a, b) => {
    if (a.quantity > b.quantity) {
      return -1;
    } else if (a.quantity < b.quantity) {
      return 1;
    } else {
      return 0;
    }

  });

  function displayShelfItemPairs() {

    let table = document.createElement('table');

    document.body.appendChild(table); 
    table.innerHTML = "<tr><th>ShelfName</th><th>itemName (w/quantity)</th></tr>"

    let shelf = 1;
    for (let r of result) {

      let tr = document.createElement('tr'); 
      table.appendChild(tr); // Append to <table> node
      tr.innerHTML = "<td>" + shelf + "</td><td>" + r.itemName + ": " + r.quantity + "</td>";
      shelf++

    }
  }
  displayShelfItemPairs()
  
}

main();