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 相关文章推荐
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
测试php函数的方法
2013/11/13 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
Javascript 构造函数 实例分析
2008/11/26 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
python图像处理之镜像实现方法
2015/05/30 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python和Go语言的区别总结
2019/02/20 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
计算机专业自我鉴定
2013/10/15 职场文书
室内设计专业自荐信
2014/05/31 职场文书
利用Python实时获取steam特惠游戏数据
2022/06/25 Python