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>
                    `
                })
相关推荐
光影少年2 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_3 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189115 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾7 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu9 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym14 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫15 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫19 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat20 分钟前
前端性能优化2
前端
无所谓จุ๊บ22 分钟前
树莓派开发相关知识十 -小试服务器
服务器·网络·树莓派