zoukankan      html  css  js  c++  java
  • 获取json对象的长度

    在我们日常前端开发中,经常会用到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();

    好了,就是这样,希望对前端开发者有一点帮助。

  • 相关阅读:
    工序打扎流程(自定义按钮移动、群响应。)
    将FAT磁盘转化为NTFS格式。
    VC监视新硬件插入电脑。
    VC读取分析网络文件
    工序打扎流程(箭头实现、刷新画面)
    VC实现自定义按钮响应拖动
    VC中ListCtrl经验总结【转载】
    C++的优先级
    VC画面闪烁及解决方法
    改变 CListCtrl、CHeaderCtrl 高度、字体、颜色和背景
  • 原文地址:https://www.cnblogs.com/baolevel/p/8168617.html
Copyright © 2011-2022 走看看