如何将GET请求返回的JSON商品数组渲染为HTML列表元素？

嘿，既然你之前用PHP实现过这个需求，那咱们来试试几个不同的技术方向，既能完成功能，还能顺便拓展你的技术栈～

方法一：纯前端原生JavaScript（无需后端） #

这个方法完全在浏览器里处理，不需要后端语言参与，适合前后端分离的场景。核心思路是用浏览器的fetch API获取数据，然后动态生成列表元素插入页面。

<!DOCTYPE html>
<html>
<head>
    <title>我的杂货清单</title>
</head>
<body>
    <h1>杂货采购列表</h1>
    <ul id="groceryList"></ul>

    <script>
        // 替换成你的实际API接口地址
        const apiUrl = 'https://your-grocery-api.com/groceries';

        // 发送GET请求并处理响应
        fetch(apiUrl)
            .then(response => {
                if (!response.ok) throw new Error('请求失败');
                return response.json();
            })
            .then(groceryItems => {
                const listContainer = document.getElementById('groceryList');
                // 遍历每个商品，生成<li>元素
                groceryItems.forEach(item => {
                    const listItem = document.createElement('li');
                    // 这里可以自定义显示内容，比如同时展示ID和商品名
                    listItem.textContent = `编号${item.id}: ${item.text}`;
                    listContainer.appendChild(listItem);
                });
            })
            .catch(error => {
                console.error('加载数据出错:', error);
                document.getElementById('groceryList').textContent = '加载杂货清单失败，请稍后重试';
            });
    </script>
</body>
</html>

方法二：Node.js + Express服务端渲染（类似PHP的服务端思路） #

如果你还是习惯服务端渲染页面的模式，可以试试用Node.js的Express框架来实现——逻辑和PHP类似，但用JavaScript生态，能帮你入门后端JS开发。

步骤： #

1. 先初始化项目并安装依赖：

npm init -y
npm install express

2. 创建server.js文件，写入以下代码：

const express = require('express');
const app = express();
const port = 3000;

// 这里可以替换成从数据库/外部API获取真实数据
const mockGroceryData = [
    { id: 1, text: "Doritos" },
    { id: 2, text: "全脂牛奶" },
    { id: 3, text: "全麦面包" }
];

// 处理根路径请求，渲染完整HTML页面
app.get('/', (req, res) => {
    // 把商品数组转为HTML列表项字符串
    const listItemsHtml = mockGroceryData.map(item => 
        `<li>编号${item.id}: ${item.text}</li>`
    ).join('');

    // 发送完整的HTML响应
    res.send(`
        <!DOCTYPE html>
        <html>
        <head>
            <title>服务端渲染杂货清单</title>
        </head>
        <body>
            <h1>我的杂货采购列表</h1>
            <ul>${listItemsHtml}</ul>
        </body>
        </html>
    `);
});

// 启动服务器
app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

3. 运行node server.js，访问http://localhost:3000就能看到渲染好的列表了。

方法三：React组件化实现（现代前端框架） #

如果想学习当下流行的前端框架，React的组件化方式会让代码更模块化、易维护，尤其适合复杂的前端应用。

步骤： #

1. 创建React项目：

npx create-react-app grocery-list-app
cd grocery-list-app

2. 修改src/App.js文件：

import { useEffect, useState } from 'react';
import './App.css';

function App() {
    // 用状态管理杂货数据和错误信息
    const [groceries, setGroceries] = useState([]);
    const [error, setError] = useState(null);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        // 组件挂载时发送GET请求
        const fetchGroceries = async () => {
            try {
                const response = await fetch('https://your-grocery-api.com/groceries');
                if (!response.ok) throw new Error('请求失败');
                const data = await response.json();
                setGroceries(data);
            } catch (err) {
                setError(err.message);
            } finally {
                setIsLoading(false);
            }
        };

        fetchGroceries();
    }, []);

    // 处理加载、错误、成功三种状态
    if (isLoading) return <div className="loading">加载中...</div>;
    if (error) return <div className="error">加载失败: {error}</div>;

    return (
        <div className="App">
            <h1>我的杂货清单</h1>
            <ul className="grocery-list">
                {groceries.map(item => (
                    <li key={item.id} className="grocery-item">
                        <span className="item-id">#{item.id}</span>
                        <span className="item-name">{item.text}</span>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default App;

3. 运行npm start，就能看到一个带状态提示的现代化杂货列表页面了。

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