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找你深情談話(huà):不想干就走??纯茨阌心男┣闆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入門(mén)教程之?dāng)?shù)據(jù)綁定原理詳解
- JavaScript中雙向數(shù)據(jù)綁定詳解
相關(guān)文章
JavaScript動(dòng)態(tài)改變div屬性的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)改變div屬性的實(shí)現(xiàn)方法,涉及javascript操作頁(yè)面div元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
JavaScript開(kāi)發(fā)簡(jiǎn)單易懂的Svelte實(shí)現(xiàn)原理詳解
這篇文章主要為大家介紹了JavaScript開(kāi)發(fā)簡(jiǎn)單易懂的Svelte實(shí)現(xiàn)原理的內(nèi)容詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2021-11-11
uniapp微信小程序獲取當(dāng)前城市名稱(chēng)逆地址解析實(shí)例教程
最近在用uni-app開(kāi)發(fā)小程序,需要獲取用戶(hù)所在城市,小程序本身沒(méi)有這樣的api,那么怎么實(shí)現(xiàn)呢?下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序獲取當(dāng)前城市名稱(chēng)逆地址解析的相關(guān)資料,需要的朋友可以參考下2022-11-11

