json數(shù)據(jù)處理及數(shù)據(jù)綁定

更新時間：2017年01月25日 10:49:27 作者：13611606223

本文主要介紹了json數(shù)據(jù)處理及數(shù)據(jù)綁定的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧

一.json數(shù)據(jù)處理

1.json數(shù)據(jù)

{"img":"quizvault_internet_test_banner@2x.png",
"golds":"200",
"praise":"64000",
"tit":"互聯(lián)網(wǎng)給工作帶來的麻煩",
"tit_describe":"在朋友圈轉(zhuǎn)發(fā)身體被掏空，HR找你深情談話：不想干就走?？纯茨阌心男┣闆r？",
"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.獲取數(shù)據(jù)

數(shù)據(jù)注入："{{data}}"

3.數(shù)據(jù)處理：

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.數(shù)據(jù)綁定

 //把json的key設為id，通過遍歷對象進行數(shù)據(jù)綁定
  for(var p in data){ 
      $('#'+p).html(data[p]);
  };

//對數(shù)組進行循環(huán)，進行綁定并且動態(tài)成成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>');
                 }

//動態(tài)css進行綁定
  $('.banner').css({
   'backgroundImage': 'url('+'images/'+ data.img+')'
  //'backgroundImage': 'url('+'{{resource}}'+ data.img+'?type=web-image'+')'
});

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JavaScript動態(tài)改變div屬性的實現(xiàn)方法
這篇文章主要介紹了JavaScript動態(tài)改變div屬性的實現(xiàn)方法,涉及javascript操作頁面div元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07
首頁圖片漂浮效果示例代碼
圖片漂浮效果想必大家都有見到過吧，一般都是通過js來實現(xiàn)的，下面為大家介紹的這個示例也是通過js實現(xiàn)的
2014-06-06
JS模擬并美化的表單控件完整實例
這篇文章主要介紹了JS模擬并美化的表單控件實現(xiàn)方法,涉及javascript結(jié)合css樣式美化表單的功能,非常美觀實用,需要的朋友可以參考下
2015-08-08
javascript之AJAX框架使用說明
javascript之AJAX框架使用說明,需要的朋友可以參考下.`
2010-04-04
使用JavaScript保存文本文件到本地的兩種方法
今天小編就為大家分享一篇關(guān)于使用JavaScript保存文本文件到本地的兩種方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01
Array.prototype 的泛型應用分析
Array.prototype 的泛型應用分析，需要的朋友可以參考下。
2010-04-04
在Javascript中使用DTO的示例詳解
在我們討論實際實現(xiàn)之前,讓我們先介紹一下DTO,它的含義是什么,何時使用以及 javascript/nodejs 項目中對它的真正需求,需要的朋友可以參考下
2023-12-12
JavaScript開發(fā)簡單易懂的Svelte實現(xiàn)原理詳解
這篇文章主要為大家介紹了JavaScript開發(fā)簡單易懂的Svelte實現(xiàn)原理的內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步
2021-11-11
小程序?qū)崿F(xiàn)日歷左右滑動效果
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)日歷左右滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
uniapp微信小程序獲取當前城市名稱逆地址解析實例教程
最近在用uni-app開發(fā)小程序,需要獲取用戶所在城市,小程序本身沒有這樣的api,那么怎么實現(xiàn)呢?下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序獲取當前城市名稱逆地址解析的相關(guān)資料,需要的朋友可以參考下
2022-11-11