json数据处理及数据绑定


Posted in Javascript onJanuary 25, 2017

一.json数据处理

1.json数据

{"img":"quizvault_internet_test_banner@2x.png",
"golds":"200",
"praise":"64000",
"tit":"互联网给工作带来的麻烦",
"tit_describe":"在朋友圈转发身体被掏空,HR找你深情谈话:不想干就走。看看你有哪些情况?",
"images":[{"name":"quizvault_internet_test_nor.png"},{"name":"quizvault_internet_test_nor.png"},{"name":"quizvault_internet_test_nor.png"},{"name":"quizvault_internet_test_nor.png"}],
"images_tit":[{"name":"自从大家习惯用微信工作后就要24小时standby"},{"name":"自从大家习惯用微信工作后就要24小时standby"},{"name":"自从大家习惯用微信工作后就要24小时standby"},{"name":"自从大家习惯用微信工作后就要24小时standby"}]
}

2.获取数据

数据注入:"{{data}}"

3.数据处理:

var datas = "{{data}}";
   var data;
   srtjson(datas);
   console.log(data);
   function srtjson(datas) {
    var b = htmlDecode(datas);
    var dataObj = b.substring(1, b.length - 1);
    data = eval("(" + dataObj + ")");
    function htmlDecode(text) {
     var temp = document.createElement("div");
     temp.innerHTML = text;
     var output = temp.innerText || temp.textContent;
     temp = null;
     return output;
    }
   }

4.数据绑定

//把json的key设为id,通过遍历对象进行数据绑定
  for(var p in data){ 
      $('#'+p).html(data[p]);
  };
//对数组进行循环,进行绑定并且动态成成html
     for(var i=0;i<data.question_tit.length;i++){
     $('#J_main ul').append('<li><div class="cir">'+data.question_tit[i].name+'</div><span>'+data.question_main[i].name+'</span></li>');
                 }
//动态css进行绑定
  $('.banner').css({
   'backgroundImage': 'url('+'images/'+ data.img+')'
  //'backgroundImage': 'url('+'{{resource}}'+ data.img+'?type=web-image'+')'
});

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 实用的文字链提示框效果
Jun 30 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
详解jQuery中ajax.load()方法
Jan 25 #Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 #Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 #Javascript
js实现文字选中分享功能
Jan 25 #Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 #Javascript
jquery实现拖动效果(代码分享)
Jan 25 #Javascript
angular forEach方法遍历源码解读
Jan 25 #Javascript
You might like
表格展示无限级分类(PHP版)
2012/08/21 PHP
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
sqlalchemy对象转dict的示例
2014/04/22 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python实现年会抽奖程序
2019/01/22 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
技能比武方案
2014/05/21 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
公司承诺书格式范文
2015/04/28 职场文书
2019同学聚会主持词
2019/05/06 职场文书
python析构函数用法及注意事项
2021/06/22 Python