如何按group字段分组渲染JSON数据至HTML页面？

核心思路 #

先把JSON数据按group字段归类，将同组产品放到一起，再为每个分组生成独立的展示区块（包含分组标题+组内产品），最后把所有分组区块插入页面。

修改后的代码实现 #

1. 脚本文件（script.js）

let http = new XMLHttpRequest();

http.open('get', 'products.json', true);
http.send();

http.onload = function(){
    if(this.readyState == 4 && this.status == 200){
        let products = JSON.parse(this.responseText);
        
        // 按group字段分组数据
        const groupedProducts = products.reduce((groups, product) => {
            const groupName = product.group;
            // 不存在的分组先创建空数组
            if (!groups[groupName]) {
                groups[groupName] = [];
            }
            groups[groupName].push(product);
            return groups;
        }, {});

        let output = "";

        // 遍历每个分组生成HTML
        for (const groupName in groupedProducts) {
            // 生成分组容器和标题
            output += `<div class="group-container">
                <h3>${groupName}</h3>
                <div class="group-products">`;
            
            // 渲染当前组的所有产品
            groupedProducts[groupName].forEach(item => {
                output += `
                    <div class="product">
                        <img src="${item.image}" alt="${item.description}">
                        <p class="title">${item.title}</p>
                        <p class="description">${item.description}</p>
                        <p class="price">
                            <span>$${item.price}</span>
                        </p>
                    </div>
                `;
            });

            // 闭合分组标签
            output += `</div></div>`;
        }
        
        document.querySelector(".products").innerHTML = output;
    }
};

2. HTML文件（可添加基础样式优化展示）

<body>
    <h2>Joes Diner - Dinner Menu</h2>
    
    <div class="products"></div>

    <style>
        .group-container {
            margin: 2rem 0;
            padding: 1rem;
            border-bottom: 2px solid #eee;
        }
        .group-container h3 {
            margin-top: 0;
            color: #333;
        }
        .group-products {
            display: flex;
            gap: 1.5rem;
            flex-wrap: wrap;
            margin-top: 1rem;
        }
        .product {
            width: 200px;
            border: 1px solid #ddd;
            padding: 0.8rem;
            border-radius: 4px;
        }
        .product img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
    </style>

    <script src="script.js"></script>
</body>

3. JSON文件（修正为标准数组格式）

[
    {
        "image": "products/01.jpg",
        "title": "Hamburger",
        "description": "Double Bacon Cheeseburger with Fries",
        "price": "9.99",
        "group": "Entree"
    },
    {
        "image": "products/02.jpg",
        "title": "French Fries",
        "description": "Large Fries served with ketchup and aioli",
        "price": "4.99",
        "group": "Starter"
    },
    {
        "image": "products/03.jpg",
        "title": "Hot Dog",
        "description": "Loaded Hot Dog with side of fries",
        "price": "6.99",
        "group": "Entree"
    },
    {
        "image": "products/04.jpg",
        "title": "Caesar Salad",
        "description": "Small Side Caesar Salad",
        "price": "7.99",
        "group": "Salad"
    }
]

关键说明 #

• 用Array.reduce()完成数据分组，是同类数据归类的高效方式；
• 每个分组独立成块，带标题的结构让页面逻辑更清晰；
• 补充的CSS样式仅为优化展示，可根据需求调整或删除；
• 原JSON需包裹在数组[]中，否则JSON.parse会解析失败，这是原代码的潜在问题。

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