json数据处理及数据绑定

 更新时间:2017年01月25日 10:49:27   作者:13611606223  
本文主要介绍了json数据处理及数据绑定的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧

一.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 hasOwnProperty 方法 & in 关键字

    Javascript hasOwnProperty 方法 & in 关键字

    hasOwnProperty :如果 object 具有指定名称的属性,那么方法返回 true;反之则返回 false。
    2008-11-11
  • 相册展示PhotoSwipe.js插件实现

    相册展示PhotoSwipe.js插件实现

    这篇文章主要为大家详细介绍了相册展示PhotoSwipe.js插件实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 比较JavaScript对象的四种方式

    比较JavaScript对象的四种方式

    这篇文章主要介绍了比较 JavaScript 对象的四种方式,对js对象感兴趣的同学,可以参考下
    2021-04-04
  • bootstrap weebox 支持ajax的模态弹出框

    bootstrap weebox 支持ajax的模态弹出框

    本篇介绍的bootstrap weebox(支持ajax的模态弹出框),历经多次修改,目前版本已经稳定,整合了bootstrap的响应式,界面简单,功能却无比丰富,支持ajax、图片预览等等
    2017-02-02
  • js浏览器html5表单验证

    js浏览器html5表单验证

    这篇文章主要为大家详细介绍了js浏览器html5表单验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 微信小程序如何自定义table组件

    微信小程序如何自定义table组件

    这篇文章主要介绍了微信小程序如何自定义table组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-06-06
  • 全面解析JavaScript 中 null

    全面解析JavaScript 中 null

    null 是一种原始类型,表示有意不包含任何对象值,在这篇文章中,你将学习关于 JavaScript 中的 null 的一切: 它的含义,如何检测它,null 和 undefined 之间的区别,以及为什么大量使用 null 会造成代码维护困难等,需要的朋友可以参考下
    2022-09-09
  • viewer.js实现图片预览功能

    viewer.js实现图片预览功能

    这篇文章主要为大家详细介绍了viewer.js实现图片预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 低门槛开发iOS、Android、小程序应用的前端框架详解

    低门槛开发iOS、Android、小程序应用的前端框架详解

    结合AVM官网的介绍和我自己的一些实践经验,我总结了一系列AVM的特性,我想这些内容足以让你主动去学习AVM框架了
    2021-10-10
  • D3.js实现绘制柱状图的教程详解

    D3.js实现绘制柱状图的教程详解

    这篇文章主要为大家详细介绍了如何通过D3.js实现绘制柱状图,文中的示例代码讲解详细,对我们学习D3.js有一定的帮助,需要的可以参考一下
    2022-11-11

最新评论