在我們日常前端開發中,經常會用到ajax請求json數據,而json數據有數組和對象2種表示結構,對象和數組。而獲取json數組結構的長度比較容易,但json對象結構的長度就比較麻煩。而本文就是對如何獲取json對象的長度進行說明。
在說明如何獲取json對象之前,我們需要了解下原生javaScript中的hasOwnProperty()方法,這個方法可以檢測一個屬性是存在於實例中,還是存在於原型中。只要給定屬性存在於對象實例中,才會返回true。來看一個簡單的例子。
// 原型模式創建對象
function Person(){}
Person.prototype.name = 'jack';
Person.prototype.age = 24;
Person.prototype.job = 'worker';
Person.prototype.fun = function(){
akert(this.name);
}
var person1 = new Person();
var person2 = new Person();
alert( perosn1.hasOwnProperty('name') );//false
person1.name = 'mark';
alert(person1.name); //mark
alert( person1.hasOwnProperty('name') );//true
在這個例子中,通過使用hasOwnProperty()方法,什么時候訪問的是實例屬性,什么時候訪問的是原型屬性就一清二楚了。好,可以進入正題了,先寫一個
imgbox.json文件數據:
{
"imgBox": [
{"urlSmall":"images/small_1.jpg","urlBig":"images/big_1.jpg"},
{"urlSmall":"images/small_2.jpg","urlBig":"images/big_2.jpg"},
{"urlSmall":"images/small_3.jpg","urlBig":"images/big_3.jpg"},
{"urlSmall":"images/small_4.jpg","urlBig":"images/big_4.jpg"},
{"urlSmall":"images/small_5.jpg","urlBig":"images/big_5.jpg"}
]
}
javaScript部分:
function addPics(){
$.getJSON('/php/imgbox.json',function(jsonData){
console.log(jsonData.imgBox[0].urlSmall);
// 獲取json對象長度的方法
function getJsonLength(data){
console.log(data);
var x ,i = 0;
for(var i in data.imgBox){
if(data.imgBox.hasOwnProperty(i)){
i++;
}
}
return i;
}
var count = getJsonLength(jsonData);
console.log(count);// 獲取到的json對象長度為5
})
}
addPics();
好了,就是這樣,希望對前端開發者有一點幫助。