如何仅用原生JavaScript从本地或服务器加载JSON并生成表格展示

阿华AIGC实验室

2026-5-28

用原生JavaScript将JSON数据展示为表格

当然可以！完全不需要任何框架，只用原生JS就能实现你的需求——不管是加载本地JSON文件，还是通过Web服务器拉取文件，都有清晰的实现方案。下面我结合你给出的加密货币数据示例，一步步给你演示：

一、本地加载JSON文件（优先方案）

由于浏览器的安全策略限制，直接打开本地HTML文件（file://协议）无法直接读取本地JSON文件，所以我们需要通过文件选择器让用户手动选择本地JSON文件，再用FileReader API读取内容。

完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地JSON转表格</title>
    <style>
        table { border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <!-- 文件选择器 -->
    <input type="file" id="jsonFileInput" accept=".json">
    <!-- 用于展示表格的容器 -->
    <div id="tableContainer"></div>

    <script>
        // 获取DOM元素
        const fileInput = document.getElementById('jsonFileInput');
        const tableContainer = document.getElementById('tableContainer');

        // 文件选择事件监听
        fileInput.addEventListener('change', handleFileSelect);

        function handleFileSelect(e) {
            const file = e.target.files[0];
            if (!file) return;

            // 使用FileReader读取文件内容
            const reader = new FileReader();
            reader.onload = function(event) {
                try {
                    // 解析JSON字符串为JavaScript对象
                    const jsonData = JSON.parse(event.target.result);
                    // 生成表格并展示
                    renderTable(jsonData);
                } catch (error) {
                    alert('JSON格式有误，请检查文件内容！');
                    console.error(error);
                }
            };
            reader.readAsText(file);
        }

        // 通用表格渲染函数
        function renderTable(data) {
            if (!Array.isArray(data) || data.length === 0) {
                tableContainer.innerHTML = '<p>没有可展示的数据</p>';
                return;
            }

            // 提取表头（从第一个对象的键）
            const headers = Object.keys(data[0]);

            // 创建表格元素
            const table = document.createElement('table');
            const thead = document.createElement('thead');
            const tbody = document.createElement('tbody');

            // 构建表头行
            const headerRow = document.createElement('tr');
            headers.forEach(header => {
                const th = document.createElement('th');
                th.textContent = header.replace('_', ' '); // 把下划线换成空格，优化显示
                headerRow.appendChild(th);
            });
            thead.appendChild(headerRow);
            table.appendChild(thead);

            // 构建表体行
            data.forEach(item => {
                const row = document.createElement('tr');
                headers.forEach(header => {
                    const td = document.createElement('td');
                    td.textContent = item[header] || '-'; // 如果值为空，显示短横线
                    row.appendChild(td);
                });
                tbody.appendChild(row);
            });
            table.appendChild(tbody);

            // 把表格添加到容器中
            tableContainer.innerHTML = '';
            tableContainer.appendChild(table);
        }
    </script>
</body>
</html>

使用说明

把上面的代码保存为index.html文件
打开这个HTML文件，点击文件选择器，选择你的本地JSON文件
页面会自动生成表格展示所有数据

二、通过Web服务器拉取JSON文件

如果你的JSON文件放在Web服务器上（比如本地搭建的Apache/Nginx，或者线上服务器），可以直接用fetch API请求文件，代码会更简洁。

完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>服务器JSON转表格</title>
    <style>
        table { border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <div id="tableContainer"></div>

    <script>
        const tableContainer = document.getElementById('tableContainer');
        // 替换成你的JSON文件路径（相对路径或绝对URL）
        const jsonUrl = './crypto-data.json';

        // 用fetch请求JSON数据
        fetch(jsonUrl)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`请求失败：${response.status}`);
                }
                return response.json();
            })
            .then(jsonData => {
                renderTable(jsonData);
            })
            .catch(error => {
                tableContainer.innerHTML = `<p>加载数据失败：${error.message}</p>`;
                console.error(error);
            });

        // 通用表格渲染函数（和本地方案的一样，复用即可）
        function renderTable(data) {
            if (!Array.isArray(data) || data.length === 0) {
                tableContainer.innerHTML = '<p>没有可展示的数据</p>';
                return;
            }

            const headers = Object.keys(data[0]);
            const table = document.createElement('table');
            const thead = document.createElement('thead');
            const tbody = document.createElement('tbody');

            const headerRow = document.createElement('tr');
            headers.forEach(header => {
                const th = document.createElement('th');
                th.textContent = header.replace('_', ' ');
                headerRow.appendChild(th);
            });
            thead.appendChild(headerRow);
            table.appendChild(thead);

            data.forEach(item => {
                const row = document.createElement('tr');
                headers.forEach(header => {
                    const td = document.createElement('td');
                    td.textContent = item[header] || '-';
                    row.appendChild(td);
                });
                tbody.appendChild(row);
            });
            table.appendChild(tbody);

            tableContainer.innerHTML = '';
            tableContainer.appendChild(table);
        }
    </script>
</body>
</html>

使用说明

把你的JSON文件（比如命名为crypto-data.json）和HTML文件放在同一个服务器目录下
启动Web服务器，访问这个HTML页面，就能自动加载并展示表格

注意事项

确保你的JSON文件格式正确：比如你提供的示例中最后一个键值对后面有多余的逗号（"market_cap_usd": "137294244348",），这种** trailing comma**在严格的JSON解析中会报错，记得去掉。
本地方案不需要服务器，适合离线使用；服务器方案适合线上部署或本地开发环境（比如用http-server快速启动本地服务器）。

内容的提问来源于stack exchange，提问作者vit