原生JS 将json数据循环遍历到HTML中

原生JS 将数组的数据循环遍历到HTML中

html如下(图片地址为本地保存的)<div id="article"><!-- <div class="info"><div class="top"><p class="shopName">第一烤场特色石棉烤肉</p><p class="one"></p><p class="two">1</p></div><img  class="shopPhoto" src="./img/01.png.webp"><div class="center"><span class="member">会员优惠：<span class="goShop">进店即免费赠送雪花牛肉一份</span></span></div><div class="footer"><p class="scan">扫码进入商家的美团店铺</p><img  class="shopScan" src="./img/a01.png"/></div></div> --></div>
javascript
//模拟json格式数据var data = [{id:"1",name:"第一考场特色石棉烤肉",memberFavourable:"进店即免费赠送雪花牛肉一份",img:"./img/01.png.webp",scan:"./img/a01.png"},{id:"2",name:"第一考场特色石棉烤肉",memberFavourable:"进店即免费赠送雪花牛肉一份",img:"./img/02.png.webp",scan:"./img/a02.png"},{id:"3",name:"第一考场特色石棉烤肉",memberFavourable:"进店即免费赠送雪花牛肉一份",img:"./img/03.png.webp",scan:"./img/a03.png"},];var loveStr = ''data.forEach(e => {loveStr += `<div class="info"><div class="top"><p class="shopName">${e.name}</p><p class="one"></p><p class="two">${e.id}</p></div><img  class="shopPhoto" src="${e.img}"><div class="center"><span class="member">会员优惠：<span class="goShop">${e.memberFavourable}</span></span></div><div class="footer"><p class="scan">扫码进入商家的美团店铺</p><img  class="shopScan" src="${e.scan}"/></div></div>`  })//渲染到htmldocument.getElementById('article').innerHTML = loveStrcss代码如下（样式随便写写）#article{margin-top: 60px;}#article .info .top{box-shadow: rgb(209, 209, 209) 0px 0px 5px 0px;color: rgb(226, 86, 27);border-top-right-radius: 6px;border-bottom-right-radius: 6px;width: 240px;height: 50px;line-height: 50px;text-align: center;margin-left: 55px;position: relative;padding-left: 10px;}.top .shopName{font-size: 16px;font-weight: bold;letter-spacing:1.5px;color: rgb(226, 86, 27);}.top .one{height: 0px;width: 0px;border-top: 0.4em solid transparent;border-right: 12px solid         color:rgb(226, 86, 27);border-bottom: 0em solid transparent;overflow: hidden;box-sizing: border-box;position: absolute;top:-15px;left: 0;}.top .two{width: 2em;height: 2em;background: rgb(226, 86, 27);text-align: left;line-height: 2em;color: rgb(255, 255, 255);font-size: 16px;position: absolute;top:-9px;left: 0;}.center{margin-top: 10px;margin-left: 40px;}.center .member{color:rgb(136, 136, 136);font-size: 17px;font-weight: bold;}.center .goShop{font-size: 13px;color:rgb(136, 136, 136);}.shopPhoto{width: 290px !important; height: auto;margin-left: 35px;display: block;margin-top: 10px;}.footer .scan{font-size: 13px;color:rgb(136, 136, 136);margin-left: 60px;}.footer .shopScan{width: 150px;height: auto;margin-left: 40px;}

原生JS 将json数据循环遍历到HTML中相关推荐

进一步封装axios并调用其读取数据（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据报错截图如下报错内容: {&quo ...
JS解析json数据并将json字符串转化为数组的实现方法
json数据在ajax实现异步交互时起到了很重要的作用,他可以返回请求的数据,然后利用客户端的js进行解析,这一点体现出js的强大,本文介绍JS解析json数据并将json字符串转化为数组的实现方法, ...
js异步请求php数据,原生JS发送异步数据请求实例详解
这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到 ...
JS解析json数据（json字符串和数组之间相互转换）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
js html 处理json数据,js 解析JSON数据
链接原文转自:http://www.w3cschool.cn/json/xumd1piw.html http://www.cnblogs.com/zoumiaomiao/p/4909539.html ...
android 读取json数据（遍历JSONObject和JSONArray）
android 读取json数据(遍历JSONObject和JSONArray) public String getJson(){ String jsonString = "{\" ...
powershell 遍历json_如何从Powershell脚本读取JSON数据并遍历它
我开始学习Powershell,我正在尝试读取JSON文件.如何从Powershell脚本读取JSON数据并遍历它这里是我的JSON文件(名为"versions.json"): ...
js判断json有没有某值_JS中判断JSON数据是否存在某字段的方法 JavaScript中判断json中是否有某个字段...
方式一 !("key" in obj) 方式二 obj.hasOwnProperty("key") //obj为json对象. 实例: var jsonwor ...
将json数据写入html表单,将json数据提交到html表中
我需要基于json响应构建一个表,调用API时调用API, 调用API并让JSON工作正常,但我没有发现任何有关构建表的文档并从x.js传递给x.html.我成功地从json传递了1个参数/值.将js ...

原生JS 将json数据循环遍历到HTML中

原生JS 将数组的数据循环遍历到HTML中

原生JS 将json数据循环遍历到HTML中相关推荐

最新文章

热门文章