如何在HTML中展示包含多子属性的people常量数组数据

你可以直接用原生JavaScript动态生成DOM结构来渲染数据，不需要依赖任何第三方框架，实现代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>人员数据展示</title>
    <style>
        /* 可选的美化样式，不需要可以删掉 */
        .person-card {
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 16px;
            margin: 16px 0;
            max-width: 600px;
        }
        .stat-item {
            display: flex;
            justify-content: space-between;
            margin: 4px 0;
            padding: 4px;
            background: #f9f9f9;
        }
    </style>
</head>
<body>
    <!-- 数据挂载的容器 -->
    <div id="people-container"></div>

    <script>
        const people = [
            { 
                name: "person 1", 
                height: 100, 
                weight: 100, 
                stats: [
                    {base_stat: 100,effort: 100,stat: {name: "hp"}},
                    {base_stat: 100,effort: 100,stat: {name: "attack"}},
                    {base_stat: 100,effort: 100,stat: {name: "defense"}},
                    {base_stat: 100,effort: 100,stat: {name: "special-attack"}},
                    {base_stat: 100,effort: 100,stat: {name: "special-defense"}},
                    {base_stat: 100,effort: 100,stat: {name: "speed"}}
                ],
                types: [{slot: 1,type: {name: "something"}}]
            },
            {
                name: "person 2",
                height: 100,
                weight: 100,
                stats: [
                    {base_stat: 100,effort: 100,stat: {name: "hp"}},
                    {base_stat: 100,effort: 100,stat: {name: "attack"}},
                    {base_stat: 100,effort: 100,stat: {name: "defense"}},
                    {base_stat: 100,effort: 100,stat: {name: "special-attack"}},
                    {base_stat: 100,effort: 100,stat: {name: "special-defense"}},
                    {base_stat: 100,effort: 100,stat: {name: "speed"}}
                ],
                types: [{slot: 1,type: {name: "something"}}]
            }
        ]

        // 核心渲染逻辑
        const container = document.getElementById('people-container')
        let htmlStr = ''

        people.forEach(person => {
            // 拼接单个人物卡片结构
            htmlStr += `
            <div class="person-card">
                <h2>${person.name}</h2>
                <p>身高：${person.height}</p>
                <p>体重：${person.weight}</p>
                <p>类型：${person.types.map(item => item.type.name).join('、')}</p>
                <h3>基础属性</h3>
                <div class="stat-list">
            `
            // 拼接属性项
            person.stats.forEach(stat => {
                htmlStr += `
                <div class="stat-item">
                    <span>${stat.stat.name}</span>
                    <span>基础值：${stat.base_stat} | 努力值：${stat.effort}</span>
                </div>
                `
            })
            htmlStr += `
                </div>
            </div>
            `
        })

        // 把生成的HTML插入到容器
        container.innerHTML = htmlStr
    </script>
</body>
</html>

核心逻辑说明 #

• 先在页面中声明一个空的容器元素，用来承载渲染出来的所有人员数据
• 遍历people数组中的每个对象，根据字段拼接对应的HTML字符串，嵌套的stats数组做二次遍历生成属性项
• 最后将拼接完成的HTML字符串赋值给容器的innerHTML属性即可完成渲染
• 你可以根据自己的需求修改HTML结构和CSS样式，调整展示效果

如果你的项目使用Vue、React等前端框架，也可以直接在框架的模板语法中循环渲染对应的数据，逻辑和原生实现基本一致。

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