欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML 之 JSON

程序员文章站 2022-06-02 17:21:32
...

JSON

JSON 轻量级的数据交换格式
JSON 用来表示对象和数组
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JSON</title>
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            img{
                width: 150px;
                margin: 0 auto;
            }
            .box{
                width: 960px;
                margin: 0 auto;
            }
            .address{
                border: 1px red solid;
                border-radius: 10px;
                font-size: 24px;
                text-align: center;
                margin-bottom: 10px;
            }
            .shopList{
                width: 960px;
                overflow: hidden;
            }
            .store{
                border: 1px red solid;
                border-radius: 10px;
                margin-bottom: 10px;
                width: 473px;
                text-align: center;
                overflow: hidden;
                float: left;
            }
            .menuDiv{
                border: 1px red solid;
                border-radius: 10px;
                width: 219px;
                margin-bottom: 10px;
                margin-left: 10px;
                text-align: left;
                text-indent: 1em;
                float: left;
            }
            .dosingDiv{
                overflow: hidden;
                margin: -25px 0px -5px;
                text-indent: 0em;
            }
            .indent{
                text-indent: 1em;
            }
            .left{
                float: left;
            }
            .right{
                float: right;
            }
        </style>
    </head>
    <body>

    </body>
    <script type="text/javascript">
        // JSON 轻量级的数据交换格式
        // XML 

        // JSON 用来表示对象和数组
        var json = '["171204", {"name":"振北", "age":"20"}, {"name":"振南", "age":"35"}]';
        // 通过 JS 自带的 JSON.parse 可以把 JSON 格式的字符串,转化为对象
        var obj = JSON.parse(json);
        console.log(obj);

        var list = '{"address":"泗泾镇九干路168号", "shopList":[{"name":"众一品过桥米线", "menu":[{"title":"黄焖鸡大份微辣", "price":"20", "dosing":["土豆", "鸡肉", "姜", "青椒"]}, {"title":"黄焖鸡大份中辣", "price":"20", "dosing":["土豆", "鸡肉", "姜", "尖椒"]}, {"title":"黄焖鸡大份中辣", "price":"20", "dosing":["土豆", "鸡肉", "姜", "尖椒"]}]}, {"name":"众一品过桥黄焖鸡", "menu":[{"title":"牛肉米线", "price":"20", "dosing":["土豆", "米线", "姜", "青椒"]}, {"title":"土豆米线", "price":"20", "dosing":["土豆", "牛肉", "姜", "尖椒"]}, {"title":"黄焖鸡米线", "price":"20", "dosing":["土豆", "鸡肉", "姜", "尖椒"]}]}, {"name":"众一品过桥黄焖鸡", "menu":[{"title":"牛肉米线", "price":"20", "dosing":["土豆", "米线", "姜", "青椒"]}, {"title":"土豆米线", "price":"20", "dosing":["土豆", "牛肉", "姜", "尖椒"]}, {"title":"黄焖鸡米线", "price":"20", "dosing":["土豆", "鸡肉", "姜", "尖椒"]}]}, {"name":"众一品过桥黄焖鸡", "menu":[{"title":"牛肉米线", "price":"20", "dosing":["土豆", "米线", "姜", "青椒"]}, {"title":"土豆米线", "price":"20", "dosing":["土豆", "牛肉", "姜", "尖椒"]}, {"title":"黄焖鸡米线", "price":"20", "dosing":["土豆", "鸡肉", "姜", "尖椒"]}]}, {"name":"众一品过桥黄焖鸡", "menu":[{"title":"牛肉米线", "price":"20", "dosing":["土豆", "米线", "姜", "青椒"]}, {"title":"土豆米线", "price":"20", "dosing":["土豆", "牛肉", "姜", "尖椒"]}, {"title":"黄焖鸡米线", "price":"20", "dosing":["土豆", "鸡肉", "姜", "尖椒"]}]}]}';
        var box = document.createElement("div");
        box.className = "box";
        var listObj = JSON.parse(list);
        var address = document.createElement("div");
        address.className = "address";
        document.getElementsByTagName("body")[0].appendChild(box);
        box.appendChild(address);
        address.innerHTML = listObj.address;
        var shopList = document.createElement("div");
        shopList.className = "shopList";
        for (var i = 0; i < listObj.shopList.length; i++) {
            var shop = listObj.shopList[i];
            var store = document.createElement("div");
            store.className = "store";
            if (i % 2 != 0) {
                store.className = "store right";
            }
            var storeName = document.createElement("h4");
            storeName.innerHTML = shop.name;
            store.appendChild(storeName);
            for (var j = 0; j < shop.menu.length; j++) {
                var menu = shop.menu[j];
                var menuDiv = document.createElement("div");
                menuDiv.className = "menuDiv";

                var img = document.createElement("img");
                img.src = "timg.jpeg";
                menuDiv.appendChild(img);

                var menuName = document.createElement("h5");
                menuName.innerHTML = menu.title;
                menuDiv.appendChild(menuName);
                var price = document.createElement("h5");
                price.innerHTML = "价格:" + menu.price;
                menuDiv.appendChild(price);
                var dosingDiv = document.createElement("div");
                dosingDiv.className = "dosingDiv";
                for (var k = 0; k < menu.dosing.length; k++) {
                    var dosing = menu.dosing[k];
                    var dosings = document.createElement("h5");
                    dosings.className = "left";
                    if (k == 0) {
                        dosings.className = "left indent";
                        dosings.innerHTML = "配料:" + dosing + ",";
                    } else if (k != menu.dosing.length - 1) {
                        dosings.innerHTML = dosing + ",";
                    } else{
                        dosings.innerHTML = dosing;
                    }
                    dosingDiv.appendChild(dosings);
                    menuDiv.appendChild(dosingDiv);
                }
                store.appendChild(menuDiv);
            }
            shopList.appendChild(store);
        }
        box.appendChild(shopList);
    </script>
</html>

http://blog.csdn.net/huzongnan/article/list

相关标签： html 对象 数据 json

上一篇： 查询—并发请求定义相关信息

下一篇： odoo学习记录2

推荐阅读