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>
                    `
                })
相关推荐
天天扭码5 分钟前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛10 分钟前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜21 分钟前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang24 分钟前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端27 分钟前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_30 分钟前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia30 分钟前
react 常用钩子 hooks 总结
前端·javascript·react.js
Mintopia39 分钟前
图形学中的数学基础与 JavaScript 实践
前端·javascript·计算机图形学
Mintopia1 小时前
Three.js 制作飘摇的草:从基础到进阶的全流程教学
前端·javascript·three.js
BillKu1 小时前
Vue3父子组件数据双向同步实现方法
前端·javascript·vue.js