Get size of JSON array in AngularJS

Question

I am using AngularJS to render html page doing ajax call, which returns json file.

How to get count of id's in below JSON using angularjs?

[{"id":1,"Name":"Apple"},
 {"id":2,"Name":"Mango"},
 {"id":3,"Name":"Banana"}
 {"id":4,"Name":"Coconut"}
 {"id":5,"Name":"pineaple"}
 {"id":6,"Name":"Orange"}
 {"id":7,"Name":"Guava"}]

possible duplicate of [Length of Javascript Object (ie. Associative Array)](http://stackoverflow.com/questions/5223/length-of-javascript-object-ie-associative-array) — domokun, Jul 04 '14 at 13:17
This is so basic that you could have found it in 30 seconds straight. It's not even Angular... — domokun, Jul 04 '14 at 13:18
should show the code that creates error, is a simple process to get array length — charlietfl, Jul 04 '14 at 13:25
@charlietfl The error says Cannot read property 'length' of undefined at line... — Ravi Ranjan, Jul 04 '14 at 13:27
the error itself doesn't help if you don't provide the code that produces the error — charlietfl, Jul 04 '14 at 13:28
It's pretty simple.. I might getting error due to some other mistake — Ravi Ranjan, Jul 04 '14 at 13:28
@RaviRanjan without more code, there's no way we can help you — Lorenzo Marcon, Jul 04 '14 at 13:29

score 12 · Answer 1 · answered Jul 04 '14 at 13:21

You don't need Angular to get the length of that.

In this case, your parsed JSON is a simple array, you can get the length with:

obj.length

assuming that obj contains your parsed JSON as such:

var obj = [{"id":1,"Name":"Apple"},
{"id":2,"Name":"Mango"},
{"id":3,"Name":"Banana"}
{"id":4,"Name":"Coconut"}
{"id":5,"Name":"pineaple"}
{"id":6,"Name":"Orange"}
{"id":7,"Name":"Guava"}]

score 11 · Answer 2 · answered May 31 '16 at 10:54

11

var json=
[{"id":1,"Name":"Apple"},
{"id":2,"Name":"Samsung"},
{"id":3,"Name":"Nokia"}
{"id":4,"Name":"Motorola"}]

  var count = Object.keys(json).length;
  console.log(count);

answered May 31 '16 at 10:54

Akash Chatterjee

181
1
3
6

2

this is the right answer. I had errors with json.length that property 'length' does not exist on type '{}'. Thank you @Akash – Filip Kováč Aug 11 '16 at 09:11

score 3 · Answer 3 · edited Mar 09 '17 at 09:51

3

In your HTML, lets say your array is "comments" (a common use-case):

{{ comments.length }}

You can also do a ng-hide="{{ comments.length}}" on an element that says something to the effect of "no comments".

edited Mar 09 '17 at 09:51

Hiren

12,720
7
52
72

answered Nov 30 '15 at 22:12

Domenic Merenda

31
1

score 0 · Answer 4 · edited Mar 09 '17 at 09:50

Everything is good if you count objects using certain key in array. What is happening if you change JSON array with some other keys? Solution i came up is for universal JSON array. For example, i am using $resource to get data: $resource(pathToJSON).query() --> it returns ResourceClass, not JSON array

After that you need to do next:

$scope.resourceClass = $resource(pathToJSON).query();

$scope.resourceClass.$promise --> returns promise object

$scope.resourceClass.$promise.then(function(data) {
      console.log(data.length);
});

data is JSON Array.

score 0 · Answer 5 · answered May 20 '19 at 07:07

Check https://jsfiddle.net/arunsoraba/qfurytmn/6/ sample.

function memorySizeOf(obj) {
    var bytes = 0;

    function sizeOf(obj) {
        if(obj !== null && obj !== undefined) {
            switch(typeof obj) {
            case 'number':
                bytes += 8;
                break;
            case 'string':
                bytes += obj.length * 2;
                break;
            case 'boolean':
                bytes += 4;
                break;
            case 'object':
                var objClass = Object.prototype.toString.call(obj).slice(8, -1);
                if(objClass === 'Object' || objClass === 'Array') {
                    for(var key in obj) {
                        if(!obj.hasOwnProperty(key)) continue;
                        sizeOf(obj[key]);
                    }
                } else bytes += obj.toString().length * 2;
                break;
            }
        }
        return bytes;
    };

    function formatByteSize(bytes) {
        if(bytes < 1024) return bytes + " bytes";
        else if(bytes < 1048576) return(bytes / 1024).toFixed(3) + " KiB";
        else if(bytes < 1073741824) return(bytes / 1048576).toFixed(3) + " MiB";
        else return(bytes / 1073741824).toFixed(3) + " GiB";
    };

    return formatByteSize(sizeOf(obj));
};

var test = [{ name :'aa'},{ name :'aa'},{ name :'aa'},{ name :'aa'},{ name :'aa'},{ name :'aa'},{ name :'aa'},{ name :'aa'},{ name :'aa'}];
var size = memorySizeOf(test);
alert(size);

score 0 · Answer 6 · answered Jan 14 '20 at 06:37

Json Data:

            { "docNme": "HSL_Invoice_SRG Network_2", "isMultiPage": true, "pgLst": [ { "pgH": "792.0", "pgW": "612.0", "pgNo": "1", "prmLst": [ { "isReference": "false", "ocrKey": "officeAddress", "keyNm": "Office Address", "keyLoc": "34,106,68,9", "keyFont": "", "keyClr": "", "valNm": "", "valLoc": "34,117,176,113", "valFont": "", "valClr": "" }, { "isReference": "false", "ocrKey": "godownAddress", "keyNm": "Godown Address", "keyLoc": "216,106,77,9", "keyFont": "", "keyClr": "", "valNm": "", "valLoc": "216,117,176,113", "valFont": "", "valClr": "" }, { "isReference": "false", "ocrKey": "GSTIN", "keyNm": "GSTIN", "keyLoc": "382,106,30,9", "keyFont": "", "keyClr": "", "valNm": "27AAACH1925Q1ZK", "valLoc": "420,106,94,9", "valFont": "", "valClr": "" }, { "isReference": "false", "ocrKey": "invoiceNo", "keyNm": "Invoice No.", "keyLoc": "382,129,55,9", "keyFont": "", "keyClr": "", "valNm": "56789", "valLoc": "444,129,32,9", "valFont": "", "valClr": "" }, { "isReference": "false", "ocrKey": "poNo", "keyNm": "PO No.", "keyLoc": "382,223,36,9", "keyFont": "", "keyClr": "", "valNm": "HSL-IT-0038-2017/2018", "valLoc": "424,223,118,9", "valFont": "", "valClr": "" } ] }, { "pgH":"792.0", "pgW":"612.0", "pgNo":"2", "prmLst":[ { "isReference": "false", "ocrKey": "officeAddress", "keyNm": "Office Address", "keyLoc": "34,106,68,9", "keyFont": "", "keyClr": "", "valNm": "", "valLoc": "34,117,176,113", "valFont": "", "valClr": "" }, { "isReference": "false", "ocrKey": "godownAddress", "keyNm": "Godown Address", "keyLoc": "216,106,77,9", "keyFont": "", "keyClr": "", "valNm": "", "valLoc": "216,117,176,113", "valFont": "", "valClr": "" }, { "isReference": "false", "ocrKey": "GSTIN", "keyNm": "GSTIN", "keyLoc": "382,106,30,9", "keyFont": "", "keyClr": "", "valNm": "27AAACH1925Q1ZK", "valLoc": "420,106,94,9", "valFont": "", "valClr": "" }, { "isReference": "false", "ocrKey": "invoiceNo", "keyNm": "Invoice No.", "keyLoc": "382,129,55,9", "keyFont": "", "keyClr": "", "valNm": "56789", "valLoc": "444,129,32,9", "valFont": "", "valClr": "" }, { "isReference": "false", "ocrKey": "poNo", "keyNm": "PO No.", "keyLoc": "382,223,36,9", "keyFont": "", "keyClr": "", "valNm": "HSL-IT-0038-2017/2018", "valLoc": "424,223,118,9", "valFont": "", "valClr": "" }] } ] }


Fetch Size :

    let pageLstSize=this.data.pgLst;
        console.log(pageLstSize);

Output : 2

score -3 · Answer 7 · answered Mar 11 '15 at 14:15

-3

If obj.length does not work please ensure you are caling it within the appropiate controller.

answered Mar 11 '15 at 14:15

Miguel Ulloa

11

Get size of JSON array in AngularJS

7 Answers7