动态创建的表格 - 仅限原版 Javascript - 不在浏览器中显示答案

【问题标题】：Dynamically created table - Vanilla Javascript only - not displaying in browser动态创建的表格 - 仅限原版 Javascript - 不在浏览器中显示
【发布时间】：2019-09-17 08:08:00
【问题描述】：

我有一个功能可以对物品及其数量进行分类和排序，并且应该将它们显示在表格中。

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

【问题讨论】：

代码出现错误：shelfName is not defined.
console.log(displayShelfItemPair(shelfName, itemName)); 应该在 displayShelfItemPair() 函数内。
你说得对，我移动了displayShelfItemPair 函数。现在没有错误，但没有任何显示
你需要移动console.log语句，而不是函数。
现在应该运行

标签： javascript html dom-manipulation

【解决方案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();

【讨论】：

您还有其他一些逻辑错误。例如，for (let r in row) 与 for (let r of row) 之间存在很大差异。你应该查一下。此外，您实际上并没有调用代码来构建表。您的行console.log(displayShelfItemPair(shelfName, itemName)); 已经在您尝试调用的函数内，并且未定义shelfName 和itemName。请注意我是如何将其移出的。
是的，您对for in and for of 的看法是正确的，我需要仔细观察
在学习 javascript 时，请学习在浏览器中使用调试器。您可以设置断点并在中途停止程序以检查变量和您的假设。这就是你如何找到类似的东西，我的函数甚至没有被调用，或者那个变量没有定义或者没有我所期望的。如果它对你有帮助，请接受这个答案，这样人们就不会在几个月后继续提供答案;)

【解决方案2】：

编辑：正如我现在所知道的，无论您在填充子对象之前还是之后添加子对象，输出都是相同的。

~~在您的函数displayShelfItemPair 中，您在填充之前附加了新的表格元素，这就是为什么在页面上不显示任何内容的原因。~~

用行等填充表格元素，然后将其附加到文档中：

function displayShelfItemPair(shelfName, itemName) {

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


    for (let i = 0; i < 3; i++) {
      let tr = document.createElement('tr'); 


      for (let j = 0; j < 3; j++) {
        let tdElement = document.createElement('td');
        tdElement.innerHTML = result[i][j];
        tr.appendChild(tdElement);

      }
      table.appendChild(tr); // Append to <table> node AFTER it is filled


    }
    document.body.appendChild(table); //append table to body AFTER it is filled
    console.log(displayShelfItemPair(shelfName, itemName));
}

【讨论】：

感谢您的回答，但即使我使用您的示例，也没有任何显示。也没有错误。
@and1 您的原始代码看起来还不错。您是否尝试过清空浏览器缓存并重新加载页面？在 Chrome 中，只需打开开发工具 (F12)，右键单击刷新图标并选择“清空缓存并硬重新加载”。