json數(shù)據(jù)處理及數(shù)據(jù)綁定
一.json數(shù)據(jù)處理
1.json數(shù)據(jù)
{"img":"quizvault_internet_test_banner@2x.png", "golds":"200", "praise":"64000", "tit":"互聯(lián)網(wǎng)給工作帶來(lái)的麻煩", "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小時(shí)standby"},{"name":"自從大家習(xí)慣用微信工作后就要24小時(shí)standby"},{"name":"自從大家習(xí)慣用微信工作后就要24小時(shí)standby"},{"name":"自從大家習(xí)慣用微信工作后就要24小時(shí)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,通過(guò)遍歷對(duì)象進(jìn)行數(shù)據(jù)綁定 for(var p in data){ $('#'+p).html(data[p]); };
//對(duì)數(shù)組進(jìn)行循環(huán),進(jìn)行綁定并且動(dòng)態(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>'); }
//動(dòng)態(tài)css進(jìn)行綁定 $('.banner').css({ 'backgroundImage': 'url('+'images/'+ data.img+')' //'backgroundImage': 'url('+'{{resource}}'+ data.img+'?type=web-image'+')' });
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- 實(shí)現(xiàn)非常簡(jiǎn)單的js雙向數(shù)據(jù)綁定
- jsp中將后臺(tái)傳遞過(guò)來(lái)的json格式的list數(shù)據(jù)綁定到下拉菜單select
- angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定
- JavaScript數(shù)據(jù)綁定實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 MVVM 庫(kù)
- JavaScript實(shí)現(xiàn)LI列表數(shù)據(jù)綁定的方法
- AngularJS 雙向數(shù)據(jù)綁定詳解簡(jiǎn)單實(shí)例
- AngularJS實(shí)踐之使用NgModelController進(jìn)行數(shù)據(jù)綁定
- 詳解JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定
- AngularJS入門教程之?dāng)?shù)據(jù)綁定原理詳解
- JavaScript中雙向數(shù)據(jù)綁定詳解
相關(guān)文章
JavaScript實(shí)現(xiàn)計(jì)算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)計(jì)算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù),本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-03-03Javascript的表單驗(yàn)證-揭開正則表達(dá)式的面紗
Javascript的表單驗(yàn)證-揭開正則表達(dá)式的面紗在本文重點(diǎn)介紹,感興趣的朋友一起學(xué)習(xí)吧2016-03-03js獲取url參數(shù)的使用擴(kuò)展實(shí)例
js獲取參數(shù)的具體應(yīng)用,歡迎加入腳本之家交流群2007-12-12JavaScript文本特效實(shí)例小結(jié)【3個(gè)示例】
這篇文章主要介紹了JavaScript文本特效,結(jié)合3個(gè)實(shí)例分析了javascript基于定時(shí)器的文字動(dòng)態(tài)操作特效相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12微信小程序swiper使用網(wǎng)絡(luò)圖片不顯示問(wèn)題解決
這篇文章主要介紹了微信小程序swiper使用網(wǎng)絡(luò)圖片不顯示問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12uniapp與webview直接進(jìn)行傳值的代碼示例
在使用UniApp開發(fā)應(yīng)用時(shí),經(jīng)常需要實(shí)現(xiàn)WebView與UniApp之間的數(shù)據(jù)交互,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-09-09詳解 javascript對(duì)象創(chuàng)建模式
這篇文章主要介紹了詳解 javascript對(duì)象創(chuàng)建模式的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)JavaScript的相關(guān)知識(shí)。感興趣的朋友可以了解下2020-10-10