模拟JSON数据并渲染到HTML中

nefelibate￡

已于 2023-10-08 08:40:02 修改

阅读量1k

点赞数

文章标签： html json 前端

于 2023-09-21 10:45:20 首次发布

本文链接：https://blog.csdn.net/m0_62676426/article/details/133124511

版权

第一步：模拟json数据

第二步：利用for循环遍历出数据

第三步：创建一个空标签放数据

第四步：声明一个变量，并将遍历出来的数据赋给变量

第五步：将数据渲染到html中

第一步：模拟json数据

 var data=[{name: "张三", sex:"男",score:"89"},
{name: "李四", sex:"男",score:"76"},
{name: "王五", sex:"女",score:"99"},
{name: "小黑", sex:"男",score:"85"},
{name: "小红", sex:"女",score:"68"}]

第二步：利用for循环遍历出数据

for(var i=0;i<data.length;i++){
console.log("姓名:"+data[i].name +" 性别:"+ data[i].sex +" 成绩:"+ data[i].score)
}

打印结果：

第三步：创建一个空标签放数据

<ul id="showData"></ul>

第四步：声明一个变量，并将遍历出来的数据赋给变量

var html='';
for (var i = 0; i < data.length; i++) {
     console.log("姓名:" + data[i].name + " 性别:" + data[i].sex + " 成绩:" + data[i].score)
     html+="<li><P>"
         +"<span>姓名:"+data[i].name+"</span>"
         +"<span> 性别:"+data[i].sex+"</span>"
         +"<span> 成绩:"+data[i].score+"</span>"
         +"</p></li>"
};

第五步：将数据渲染到html中

$("#showData").html(html)

代码运行结果：

完整代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>模拟json数据并渲染</title>
    <script type="text/javascript" src="//f3-v.veimg.cn/f2e/gallery/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
    <ul id="showData">

    </ul>
    <script type="text/javascript">
        $(function () {
            $(document).ready(function () {
                var data = [{ name: "张三", sex: "男", score: "89" },
                { name: "李四", sex: "男", score: "76" },
                { name: "王五", sex: "女", score: "99" },
                { name: "小黑", sex: "男", score: "85" },
                { name: "小红", sex: "女", score: "68" }]
                var html = '';

                for (var i = 0; i < data.length; i++) {
                    // console.log("姓名:" + data[i].name + " 性别:" + data[i].sex + " 成绩:" + data[i].score)
                    html += "<li><P>"
                        + "<span>姓名:" + data[i].name + "</span>"
                        + "<span> 性别:" + data[i].sex + "</span>"
                        + "<span> 成绩:" + data[i].score + "</span>"
                        + "</p></li>"
                    console.log(html)
                };
                $("#showData").html(html)
            })

        })
    </script>
</body>

</html>

nefelibate￡

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
模拟JSON数据并渲染到HTML中

第一步：模拟json数据。第二步：利用for循环遍历出数据。第三步：创建一个空标签放数据。第四步：定义一个变量，我这里命名为“html”，将遍历出来的数据内容赋给这个变量。第五步：将数据渲染到html中。
复制链接

扫一扫