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>
                    `
                })
相关推荐
用户17592342150281 分钟前
D3.js - 基本用法
前端·d3.js
張萠飛5 分钟前
Linux的TCP连接数到达2万,其中tcp_tw、tcp_alloc、tcp_inuse都很高,可能出现什么问题
linux·网络·tcp/ip
Mr.Liu618 分钟前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
76756047918 分钟前
useDateFormat源码解析
前端·源码
Mintopia19 分钟前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
Promise52019 分钟前
大屏"跑马灯" 长列表性能优化
前端·javascript
子玖20 分钟前
初始化项目前的准备
前端·javascript·vue.js
Mintopia20 分钟前
Three.js进阶实战:打造动态光影交互场景 ——结合环境光、聚光灯与相机控制的沉浸式体验
前端·javascript·three.js
贵州数擎科技有限公司20 分钟前
Threejs绘制小兩伞快拿去送给你的女神
前端
Carlos_sam22 分钟前
OpenLayers:封装Overlay的方法
前端·javascript