时间戳

首页 > 解决方案 > 如何设置从 .json 文件写入 html 表

javascript - 如何设置从 .json 文件写入 html 表

问题描述

我需要编写这样的代码，它将填充指定文件夹（轨道）中的表，其中仅包含 .json 文件，例如：

{
            "EndTime": "11:00",
            "Person": [
                {
                    "name": "one",
                    "age": 5
                },
                {
                    "name": "two",
                    "age": 7
                }
            ],
            "StartTime": "10:45"
        }

我是初学者，我不明白如何将行附加到表中，从 .json 文件 html.file 中获取数据

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MUI Landing Page Example</title>
    <link href="https://cdn.muicss.com/mui-latest/css/mui.min.css" rel="stylesheet" type="text/css" />
    <title>Measurements</title>
    <script src="https://cdn.muicss.com/mui-latest/js/mui.min.js"></script>
  </head>
  <body>
    <header class="mui-appbar mui--z1">
      <div class="mui-container">
        <table>
          <tr class="mui--appbar-height">
            <td class="mui--text-title">Measurements</td>
          </tr>
        </table>
      </div>
    </header>
    <div id="content-wrapper" class="mui--text-center">
      <div class="mui--appbar-height"></div>
      <br>
      <br>
      <div class="mui--text-display3">Measurements</div>
      <br>
      <br>
      <button 
        type = "submit"
        id = "submit"
        class="mui-btn mui-btn--primary"
        >
        take info
    </button>
    </div>
    <table class="mui-table">
        <thead>
          <tr>
            <th>N</th>
            <th>Name of file</th>
            <th>Start time</th>
            <th>End time</th>
            <th>Nuber of person</th>
          </tr>
        </thead>
        <tbody>
        </tbody id='myTable'>
      </table>
    <footer>
      <div class="mui-container mui--text-center">
        Made by Kumiho
      </div>
    </footer>
  </body>
</html>

webpack.config.js

const path = require('path')
const HTMLPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    entry: './src/app.js',
    output : {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public')
    },
    devServer: {
        port: 3000
    },
    plugins: [
new HTMLPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin()
    ],
    module: {
        rules: [
          {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          }
        ],
      }
}

应用程序.js

import './static/styles.css'

const table = document.getElementById('myTable')
document.querySelector("#submit").onclick = function(){
        const tr = [{
            "EndTime": "11:00",
            "Person": [
                {
                    "name": "one",
                    "age": 5
                },
                {
                    "name": "two",
                    "age": 7
                }
            ],
            "StartTime": "10:45"
        },
        {
            "EndTime": "11:05",
            "Person": [
                {
                    "name": "three",
                    "age": 6
                },
                {
                    "name": "four",
                    "age": 7
                }
            ],
            "StartTime": "11:00"
        }]
document.querySelector('.content').insertRow= `<table class="track"></table>`


   for (let i=0; i< tr.length; i++) {
    let tr = document.createElement('TR');
    let td = document.createElement('TD');
    document.querySelector("#submit").onclick = function(){

    let row = document.createElement ('str')
    row.insertRow = '<tr>' +
                  `<td>+${index}+</td>` +
                  `<td>+${file}+</td>` +
                  `<td>+${tr.StartTime}+</td>` +
                  `<td>+${tr.EndTime}+</td>` +
                  `<td>+${tr.Person.length}+</td>` +
                '</tr>';
   
   document.querySelector('.track').appendChild(row)
    
}
}

该站点启动，但出现错误：

app.js：28 未捕获的类型错误：无法在 HTMLButtonElement.document.querySelector.onclick 处设置 null 属性（设置“insertRow”）

此外，如您所见，即使给定的对象数组也不会填满表格。

标签： javascripthtmlnode.jsjsonwebpack

解决方案

有很多问题。

这是一个工作版本 - 我将列出一些问题

  1. 永远不要叫任何东西提交。如果在表单中，如果您这样做，提交事件将被隐藏
  2. 您没有有效地使用模板文字。不要连接模板文字 - 这是对文字的浪费
  3. 您想填充表格，但您尝试设置内容的 insertRow 属性
  4. 应该怎么let row = document.createElement ('str')做？<str>不是已知的 HTML 标记

我没有看其他代码 - 问更多问题

const rows = [{
    "EndTime": "11:00",
    "Person": [{
        "name": "one",
        "age": 5
      },
      {
        "name": "two",
        "age": 7
      }
    ],
    "StartTime": "10:45"
  },
  {
    "EndTime": "11:05",
    "Person": [{
        "name": "three",
        "age": 6
      },
      {
        "name": "four",
        "age": 7
      }
    ],
    "StartTime": "11:00"
  }
]

const table = document.getElementById('myTable')
document.getElementById("subBut").addEventListener("click", function(e) {
  e.preventDefault(); 
  table.innerHTML = rows.map((tr, index) => `<tr><td>${index}</td>
          <td>${tr.StartTime}</td>
          <td>${tr.EndTime}</td>
          <td>${tr.Person.length}</td>
          </tr>`).join("")
})
<table>
  <tbody id="myTable" class="track"></tbody>
</table>
<input type="submit" id="subBut" />

推荐阅读