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":"自從大家習(xí)慣用微信工作后就要24小時standby"},{"name":"自從大家習(xí)慣用微信工作后就要24小時standby"},{"name":"自從大家習(xí)慣用微信工作后就要24小時standby"},{"name":"自從大家習(xí)慣用微信工作后就要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設(shè)為id,通過遍歷對象進(jìn)行數(shù)據(jù)綁定 for(var p in data){ $('#'+p).html(data[p]); };
//對數(shù)組進(jìn)行循環(huán),進(jì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進(jìn)行綁定 $('.banner').css({ 'backgroundImage': 'url('+'images/'+ data.img+')' //'backgroundImage': 'url('+'{{resource}}'+ data.img+'?type=web-image'+')' });
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
您可能感興趣的文章:
- 實現(xiàn)非常簡單的js雙向數(shù)據(jù)綁定
- jsp中將后臺傳遞過來的json格式的list數(shù)據(jù)綁定到下拉菜單select
- angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定
- JavaScript數(shù)據(jù)綁定實現(xiàn)一個簡單的 MVVM 庫
- JavaScript實現(xiàn)LI列表數(shù)據(jù)綁定的方法
- AngularJS 雙向數(shù)據(jù)綁定詳解簡單實例
- AngularJS實踐之使用NgModelController進(jìn)行數(shù)據(jù)綁定
- 詳解JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定
- AngularJS入門教程之?dāng)?shù)據(jù)綁定原理詳解
- JavaScript中雙向數(shù)據(jù)綁定詳解
相關(guān)文章
JavaScript實現(xiàn)計算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)計算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù),本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-03-03Javascript的表單驗證-揭開正則表達(dá)式的面紗
Javascript的表單驗證-揭開正則表達(dá)式的面紗在本文重點(diǎn)介紹,感興趣的朋友一起學(xué)習(xí)吧2016-03-03微信小程序swiper使用網(wǎng)絡(luò)圖片不顯示問題解決
這篇文章主要介紹了微信小程序swiper使用網(wǎng)絡(luò)圖片不顯示問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12uniapp與webview直接進(jìn)行傳值的代碼示例
在使用UniApp開發(fā)應(yīng)用時,經(jīng)常需要實現(xiàn)WebView與UniApp之間的數(shù)據(jù)交互,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-09-09