html获取网络数据,列表展示 第二种

html获取网络数据,列表展示 第二种

js遍历json数组中的json对象

image.png

|| '-' 判断数据是否为空,为空就显示 -

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>网页列表</title>

        <script type="text/javascript">
            // https://api.thecatapi.com/v1/images/search?limit=2
            // 
            // {
            //  "id": "1ep",
            //  "url": "https://cdn2.thecatapi.com/images/1ep.jpg",
            //  "width": 448,
            //  "height": 674
            // },


            // 创建XMLHttpRequest对象,新版本的浏览器可以直接创建XMLHttpRequest对象,IE5或IE6没有
            // XMLHttpRequest对象,而是用的ActiveXObject对象
            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
            xhr.open("get", 'https://api.thecatapi.com/v1/images/search?limit=2', true);
            xhr.send(); //发送请求

            // 监听请求的状态
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 请求成功后的处理
                    console.log('111 111 返回的数据', xhr.responseText);
                    var imgurlStr = "";
                    // // 打印,获取json里的对象
                    var data2 = JSON.parse(xhr.responseText);


                    data2.forEach(item => {
                        imgurlStr += `

                     <div id="${item.id}"> 
                         <div>${item.id}</div>
                         <img style="width: 100px; height: 100px;" src="${item.url}" alt="" width=" ${item.width}px" height="${item.height}px">
                     </div>

                        `
                    })
                    document.getElementById("listID").innerHTML = imgurlStr;
                }
            };
        </script>

    </head>

    <body>
        <div id="listID"> </div>
    </body>

</html>

或这样

image.png

                data2.forEach((item, index) => {
                    imgurlStr += `
                    <div id="${item.aJZT}-${index}" style="margin-bottom:20px;border-radius:10px;border:1px solid #ddd;"> 
                     <div style="border: 1px #f2f2f2 double; margin: 12px;">
                                    <div class="cell2" style="font-weight:bold;font-size:30px;">
                                        <div class="cell-lab">某某时间</div>
                                        <div class="cell-val" id="cXSJ">${item.cXSJ|| '-'}</div>
                                    </div>
                                    <div class="cell">
                                        <div class=" cell-lab">某某状态</div>
                                        <div class="cell-val" id="aJZT">${item.aJZT || '-'}</div>
                                    </div>
                                </div>
                    </div>
                    `
                })
相关推荐
baiduopenmap7 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish15 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
网络安全-杰克17 分钟前
网络安全概论
网络·web安全·php
怀澈12221 分钟前
高性能服务器模型之Reactor(单线程版本)
linux·服务器·网络·c++
请叫我欧皇i27 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_30 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun36 分钟前
空间数据存储格式GeoJSON
前端
耗同学一米八1 小时前
2024 年河北省职业院校技能大赛网络建设与运维赛项样题二
运维·网络·mariadb
skywalk81631 小时前
树莓派2 安装raspberry os 并修改成固定ip
linux·服务器·网络·debian·树莓派·raspberry
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium