how to find a if an array is empty within an array in javascript (angularjs)

Question

I'm currently trying to find if an object property "itemBag" is set in an object.

The issue I am having is that I am getting 2 different arrays from the api and the property "itemBag" is not included within the object so I get an "undefined" error.

The 2 different arrays that I get:

Array 1:

[
  [
    {
      "orderNumber": 1,
      "itemBag": [
        {
          "size": 10000,
          "name": "hello.pdf",
        }
      ]
    }
  ]
]

Array 2:

[
  [
    {
      "orderNumber": 1
    }
  ]
]

The function that I am using to try to determine if "itemBag" is empty or not:

$scope.reproductions is the array mentioned above

$scope.checkFirstDesignContainerIsEmpty = function() {
    var containerIsEmpty;
    if($scope.reproductions[0][0].includes(itemBag)) {
      containerIsEmpty = true;
    }
    return containerIsEmpty;
};

I keep getting an error that itemBag is undefined.

(parent.childArray || []).length === 0 is a simple way to test if an array — Taplar
– Taplar, Commented Dec 28, 2018 at 15:40

Drew Reese · Accepted Answer · 2018-12-28 16:04:26Z

2

What is itemBag in your function? It isn't declared before use so of course it is undefined. $scope.reproductions[0][0] is also not an array, it is an object, so trying to call array functions like includes just won't work.

$scope.checkFirstDesignContainerIsEmpty = function() {
    var containerIsEmpty;
    if($scope.reproductions[0][0].includes(itemBag)) { // itemBag hasn't been declared, so is undefined
      containerIsEmpty = true;
    }
    return containerIsEmpty;
};

To test if the $scope.reproductions[0][0] object doesn't have an itemBag property, or if it does and it is empty:

$scope.checkFirstDesignContainerIsEmpty = function() {
    var containerIsEmpty = true;

    // test if itemBag key exists and value has truthy length value
    const { itemBag } = $scope.reproductions[0][0];
    if(itemBag && itemBag.length) {
      containerIsEmpty = false;
    }
    return containerIsEmpty;
};

Or more succinctly:

$scope.checkFirstDesignContainerIsEmpty = function() {
    const { itemBag } = $scope.reproductions[0][0];
    return !(itemBag && itemBag.length);
};

edited Dec 28, 2018 at 16:04

answered Dec 28, 2018 at 15:46

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zomdar Over a year ago

$scope.reproductions is the array mentioned above

Drew Reese Over a year ago

Yes, $scope.reproductions is defined, but how you're using array::includes isn't correct. As written you are searching your reproductions array for a value that matches whatever itemBag is, but itemBag isn't defined. It also won't work because reproductions[0][0] isn't an array, it's an object.

Austin Gordon · Accepted Answer · 2018-12-28 15:51:15Z

-1

Try adding quotes around itemBag:

$scope.checkFirstDesignContainerIsEmpty = function() {
  var containerIsEmpty;
  if($scope.reproductions[0][0].includes('itemBag')) { // Added quotes here
    containerIsEmpty = true;
  }
  return containerIsEmpty;
};

answered Dec 28, 2018 at 15:51

Austin Gordon

696 bronze badges

2 Comments

zomdar Over a year ago

$scope.reproductions[0][0].includes is not a function is the error that i am getting

Austin Gordon Over a year ago

My mistake! You can only use includes on an array. When trying to see if an object has a property you have to use hasOwnProperty. See here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

how to find a if an array is empty within an array in javascript (angularjs)

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related