定义假json数据,本地项目
数据放在ejs中不能进行随机拿去或遍历拿去数据,每次显示数据格式不对,json.parse后不能进行foreach遍历,显示格式不正确,提示不是数组形式
index.ejs
整体取值的index.ejs
这样的话 就可以不等后台,或者不等开发接口来进行你的页面开发了,菜鸟求大神罩
效果图如下
Livebroadcast文件:
{
"livebroadcast": {
"insuranceContractNo": "01",
"applicantName": "直播推荐",
"query": {
"id": "9",
"videosnapshot": "/images/0.jpg",
"userAvatar": "/images/istest.jpg",
"userName": "一盒小小酥",
"userTxt": "暴走的孙尚香",
"forwardingnumber": "5990",
"audiencecount": "5990"
}
},
"playback": {
"insuranceContractNo": "01",
"applicantName": "直播推荐",
"query": {
"id": "9",
"videosnapshot": "/images/0.jpg",
"userAvatar": "/images/istest.jpg",
"userName": "一盒小小酥",
"userTxt": "暴走的孙尚香",
"forwardingnumber": "5990",
"audiencecount": "5990"
}
},
"video": {
"insuranceContractNo": "01",
"applicantName": "直播推荐",
"query": {
"id": "9",
"videosnapshot": "/images/0.jpg",
"userAvatar": "/images/istest.jpg",
"userName": "一盒小小酥",
"userTxt": "暴走的孙尚香",
"forwardingnumber": "5990",
"audiencecount": "5990"
}
}
}
index.js
var express = require('express'); var router = express.Router(); var http=require("http"); var fs=require('fs'); /* GET home page. */ router.get('/', function(req, res, next) { fs.readFile('./livebroadcast.txt','utf-8',function(err,data){ if(err){ console.error(err); } else{ var str = JSON.stringify(data); var date2 = JSON.parse(str); /*console.log("长度是:"+arrMongodb.length);*/ res.render('index', { title: 'Express',lists:date2}); } }); }); module.exports = router;
数据放在ejs中不能进行随机拿去或遍历拿去数据,每次显示数据格式不对,json.parse后不能进行foreach遍历,显示格式不正确,提示不是数组形式
index.ejs
<% var aaa = JSON.parse(lists); var cont = Object.entries(aaa); for(var i=0;i<cont.length;i++){ var conts = Object.entries(cont[i][1]); %> <div class="container_div"> <div class="container_div_title"><%= conts[1][1] %></div> <div class="glyphicon glyphicon-chevron-right"></div> </div>在我苦思冥想了好长时间就想到用obj进行构造,也可以用foreach进行循环遍历,可遍历出来的效果差强人意就选择了for循环直接取了,使用for循环多注意生命周期与所需数据所在的位置才能更好的自动化渲染页面
整体取值的index.ejs
<% var aaa = JSON.parse(lists); var cont = Object.entries(aaa); for(var i=0;i<cont.length;i++){ var conts = Object.entries(cont[i][1]); %> <div class="container_div"> <div class="container_div_title"><%= conts[1][1] %></div> <div class="glyphicon glyphicon-chevron-right"></div> </div> <table class="table"> <% var aaa = JSON.parse(lists); var cont = Object.entries(aaa); for(var j=0;j<2;j++){ var conts = Object.entries(cont[i][1]); var contsw = Object.entries(conts[2][1]); %> <tr> <td> <div id="table_div1" class="container_table_div1"> <img src="<%= contsw[1][1] %>" alt="..." class="img-rounded"> <div class="table_tr_td_div"> <img src="<%= contsw[2][1] %>" alt="..." class="img-circle"> <div class="table_tr_td_div_div1"><%= contsw[3][1] %></div> <div class="table_tr_td_div_div2"><%= contsw[4][1] %></div> </div> <div class="table_fonts">观看人数:<%= contsw[5][1] %></div> <div class="table_fonts2">转发人数:<%= contsw[6][1] %></div> </div> </td> <th> <div id="table_div2" class="container_table_div2"> <img src="<%= contsw[1][1] %>" alt="..." class="img-rounded"> <div class="table_tr_td_div"> <img src="<%= contsw[2][1] %>" alt="..." class="img-circle"> <div class="table_tr_td_div_div1"><%= contsw[3][1] %></div> <div class="table_tr_td_div_div2"><%= contsw[4][1] %></div> </div> <div class="table_fonts">观看人数:<%= contsw[5][1] %></div> <div class="table_fonts2">转发人数:<%= contsw[6][1] %></div> </div> </th> </tr> <%}%> </table> <%}%>
这样的话 就可以不等后台,或者不等开发接口来进行你的页面开发了,菜鸟求大神罩
效果图如下