如何使用Py-script和Pandas在HTML中展示JSON数据？

你遇到的核心问题是：PyScript能正常读取JSON并在控制台打印Pandas处理后的数据，但无法将数据渲染到指定的HTML元素中。控制台能输出说明数据读取、处理流程没问题，问题大概率出在DOM操作的时机或方式上。

1. 确保DOM元素存在且脚本执行时机正确 #

首先确认HTML中确实存在id="pythonoutput"的元素，比如：

<div id="pythonoutput"></div>

如果你的PyScript代码写在HTML元素之前，可能会出现元素未加载就执行脚本的情况。可以把<py-script>标签放在HTML末尾，或者用@when装饰器监听页面加载完成事件：

import pandas as pd
from pyscript import document, when

@when("DOMContentLoaded")
def render_data():
    df = pd.read_json('data.json')
    data_output = document.querySelector("#pythonoutput")
    data_output.innerHTML = df.to_string()

2. 使用PyScript内置的display函数（推荐方案） #

PyScript提供了专门的display函数，比直接操作innerHTML更适配Python对象渲染，无需手动获取DOM元素：

import pandas as pd
from pyscript import display

df = pd.read_json('data.json')
# 直接将DataFrame渲染到指定id的元素中
display(df, target="pythonoutput")

3. 用Pandas生成HTML表格优化展示效果 #

如果不想显示纯文本，而是更友好的表格，用df.to_html()替代to_string()：

import pandas as pd
from pyscript import document

df = pd.read_json('data.json')
data_output = document.querySelector("#pythonoutput")
# 生成带边框的HTML表格，还可添加CSS类名配合样式美化
data_output.innerHTML = df.to_html(border=1, classes="table-style")

4. 解决本地文件读取权限问题 #

如果是通过file://协议打开本地HTML文件，部分浏览器会限制本地文件读取。可以改用fetch异步加载JSON：

import pandas as pd
from pyscript import document, fetch

async def load_and_render():
    response = await fetch('data.json')
    json_data = await response.json()
    df = pd.DataFrame(json_data)
    data_output = document.querySelector("#pythonoutput")
    data_output.innerHTML = df.to_string()

load_and_render()

• 打开浏览器开发者工具（F12）的Console标签，查看是否有PyScript报错（比如元素找不到、文件路径错误）。
• 检查你的JSON文件，最后一个键值对后的多余逗号建议删除（虽然多数解析器兼容，但可能引发潜在问题）：

{
    "Name": {
        "01":"DragonForce",
        "02":"Black Sabbath",
        "03":"Smash Into Pieces",
        "04":"Slayer"
    },
    "Most Popular Song": {
        "01":"Through The Fire And Flames",
        "02":"Iron Man or Paranoid or War Pigs",
        "03":"Six Feet Under",
        "04":"Raining Blood"
    },
    "Personal Favorite": {
        "01":"Heartbreak Armageddon",
        "02":"Wheels of Confusion",
        "03":"Come Along and Don't Wake Me Up",
        "04":"Praise of Death"
    }
}

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