html页面怎么循环输出json

HTML页面中循环输出JSON数据的实用指南

在Web开发中，经常需要将JSON数据动态渲染到HTML页面上，本文将详细介绍几种在HTML页面中循环输出JSON数据的方法,帮助开发者高效地处理数据展示。

使用JavaScript原生方法循环输出JSON

JavaScript是最直接的方式，可以通过数组的forEach、map等方法循环处理JSON数据。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">JSON数据循环输出示例</title>
</head>
<body>
    <h1>用户列表</h1>
    <ul id="userList"></ul>
    <script>
        // 示例JSON数据
        const users = [
            {id: 1, name: "张三", age: 25, email: "zhangsan@example.com"},
            {id: 2, name: "李四", age: 30, email: "lisi@example.com"},
            {id: 3, name: "王五", age: 28, email: "wangwu@example.com"}
        ];
        // 获取DOM元素
        const userList = document.getElementById('userList');
        // 使用forEach循环输出
        users.forEach(user => {
            const li = document.createElement('li');
            li.textContent = `ID: ${user.id}, 姓名: ${user.name}, 年龄: ${user.age}, 邮箱: ${user.email}`;
            userList.appendChild(li);
        });
    </script>
</body>
</html>

使用模板字符串优化输出

对于更复杂的HTML结构,可以使用模板字符串提高代码可读性。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">使用模板字符串输出JSON</title>
    <style>
        .user-card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .user-name {
            font-weight: bold;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <h1>用户卡片展示</h1>
    <div id="userCards"></div>
    <script>
        const users = [
            {id: 1, name: "张三", age: 25, email: "zhangsan@example.com"},
            {id: 2, name: "李四", age: 30, email: "lisi@example.com"},
            {id: 3, name: "王五", age: 28, email: "wangwu@example.com"}
        ];
        const userCards = document.getElementById('userCards');
        // 使用map和join方法
        userCards.innerHTML = users.map(user => `
            <div class="user-card">
                <div class="user-name">${user.name}</div>
                <div>年龄: ${user.age}</div>
                <div>邮箱: ${user.email}</div>
            </div>
        `).join('');
    </script>
</body>
</html>

使用框架/库处理JSON数据

对于复杂项目，可以使用Vue、React等框架更高效地处理JSON数据。

Vue.js示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">Vue.js循环输出JSON</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        .product {
            border: 1px solid #eee;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
        }
        .product-name {
            font-weight: bold;
            color: #27ae60;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>产品列表</h1>
        <div v-for="product in products" :key="product.id" class="product">
            <div class="product-name">{{ product.name }}</div>
            <div>价格: ¥{{ product.price }}</div>
            <div>库存: {{ product.stock }}</div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                products: [
                    {id: 1, name: "笔记本电脑", price: 5999, stock: 20},
                    {id: 2, name: "智能手机", price: 3999, stock: 50},
                    {id: 3, name: "平板电脑", price: 2999, stock: 30}
                ]
            }
        });
    </script>
</body>
</html>

React示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">React循环输出JSON</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <style>
        .book {
            border: 1px solid #ddd;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .book-title {
            font-weight: bold;
            color: #3498db;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const books = [
            {id: 1, title: "JavaScript高级程序设计", author: "Nicholas C. Zakas", price: 129},
            {id: 2, title: "CSS权威指南", author: "Eric A. Meyer", price: 99},
            {id: 3, title: "理解计算机系统", author: "Randal E. Bryant", price: 139}
        ];
        function BookList() {
            return (
                <div>
                    <h1>书籍列表</h1>
                    {books.map(book => (
                        <div key={book.id} className="book">
                            <div className="book-title">{book.title}</div>
                            <div>作者: {book.author}</div>
                            <div>价格: ¥{book.price}</div>
                        </div>
                    ))}
                </div>
            );
        }
        ReactDOM.render(<BookList />, document.getElementById('root'));
    </script>
</body>
</html>

从API获取JSON数据并循环输出

实际开发中，JSON数据通常来自API,以下是一个使用fetch获取数据并循环输出的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">从API获取JSON数据</title>
    <style>
        .post {
            border: 1px solid #ddd;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
        }
        .post-title {
            font-weight: bold;
            color: #e74c3c;
        }
        .loading {
            color: #7f8c8d;
            font-style: italic;
        }
        .error {
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <h1>博客文章列表</h1>
    <div id="postsContainer">
        <div class="loading">加载中...</div>
    </div>
    <script>
        const postsContainer = document.getElementById('postsContainer');
        // 模拟API请求
        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(posts => {
                postsContainer.innerHTML = posts.slice(0, 5).map(post => `
                    <div class="post">
                        <div class="post-title">${post.title}</div>
                        <div>${post.body}</div>
                    </div>
                `).join('');
            })
            .catch(error => {
                postsContainer.innerHTML = '<div class="error">加载数据失败: ' + error.message + '</div>';
            });
    </script>
</body>
</html>