title: How to filter out or get rid of null objects within array? AngularJS, Firebase
body: <p>My app is built using AngularJS, Yeoman stack, connected to the Firebase, AngularFire database. In my app I am trying to upload and delete pictures as shown below</p>
  
  <p><img src="https://i.stack.imgur.com/fSgfj.png" alt="enter image description here"></p>
  
  <p>It works fine except when I delete any imgs in between other images it does not actually remove the img but replaces it with an img with width and height of 0 as such... or it seems (more info in the bottom)</p>
  
  <p><img src="https://i.stack.imgur.com/gBLiP.png" alt="enter image description here"></p>
  
  <p>and if I delete another "in-bewteen" img same deal </p>
  
  <p><img src="https://i.stack.imgur.com/mdOlh.png" alt="enter image description here"></p>
  
  <p>only when I delete the outer most img does the page really remove the imgs.</p>
  
  <p><img src="https://i.stack.imgur.com/mAFKg.png" alt="enter image description here"> </p>
  
  <p>^^Notice how the one in between two other images on the top row did not delete because it is surrounded horizontally via other img objects. I had to firebase.remove the bottom two imgs to the right of the one I deleted very first and only then the whole bottom row was removed.</p>
  
  <p>I am not sure why I am getting this bug, could anyone give me some feedback?</p>
  
  <p>Here is my deleteImg and updateImg function in my controller</p>
  
  <pre><code>angular.module('myApp').controller('MainCtrl', ['$scope', '$firebase', '$filter', function($scope, $firebase, $filter) {
  $scope.deleteImg = function(img) {
      if (confirm('Are you sure you want to delete the img?') === true) {
          var deletingID = img.id; 
          var deletingLink = fireRef + "/" + img.id;
          var deleteRef = new Firebase(deletingLink);
          deleteRef.remove();
          $(".delete").remove();
          location.reload();
      }
  };
  
  $scope.updateImg = function(Img) {
      if (confirm('Are you sure you want to update the Img?') === true) {
          var updatingID = $scope.selectedImg.id; 
          var updatingLink = fireRef + "/" + $scope.selectedImg.id;
          var updateRef = new Firebase(updatingLink);
  
          var dataObject = {
              "name" : $scope.selectedImg.name, "description": $scope.selectedImg.description, "type": $scope.selectedImg.type ... etc...
          };
          updateRef.set(dataObject);
          location.reload();
      }
  };
  }]);
  </code></pre>
  
  <p>Here is how I instantiate my array and Firebase database as well as create new $scope.selectedImg. I am currently grabbing the data from firebase database and instantiating an array of Img objects. I use the array as my img models in the app. </p>
  
  <pre><code>var fireRef = new Firebase('MY_FIREBASE_URL');
  
  $scope.imgs = []; //&lt;&lt;&lt; instantiate a new array
  
  var imgNum = 0;
  var toArrayFirebaseLink = fireRef + '/' + imgNum;
  
  fireRef.once('value', function(allSnapshot) {
      allSnapshot.forEach(function(imgSnapshot) {
          var i = imgSnapshot.child('id').val();
          if( i !== null ){
              // set databaseSnapshot to our img array
              $scope.imgs[i] = imgSnapshot.val();
          }
     });
  });
  
  $scope.instantiateImg = function(object) {
      $scope.selectedImg = {};
      // $scope.selectedImg.name = "";
      $scope.selectedImg.etc = "";
      $scope.selectedImg.etc = "";
  };
  
  //Created selectedImg with data retrieved from database to be used within the views.
  $scope.selectImg = function(object) {
      $scope.selectedImg = object;
  };
  </code></pre>
  
  <p>Here is my html view</p>
  
  <pre><code>&lt;div class="container"&gt;  
   &lt;div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 campaign-thumbs" ng-repeat="img in imgs track by $index" ng-animate="'animate'"&gt;
  
  &lt;button type="button" class="delete" ng-click="deleteImg(img)"&gt;
        &lt;span&gt;&amp;times;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Delete&lt;/span&gt;
  &lt;/button&gt;
  
  &lt;img ng-click="selectImg(img)" src="{{img.imgSrc}}" class="img-responsive" data-toggle="modal" data-target="#imgModal"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Using the chrome AngularJS extension I identified that the elements that I deleted within the database using the firebase remove() function, my $scope.imgs array still has a "null" element within the space in which I removed it. See below picture</p>
  
  <p><img src="https://i.stack.imgur.com/jsc6s.png" alt="enter image description here"></p>
  
  <p>How do I get past this bug?</p>
  
  <hr>
  
  <p>EDIT1: 
  I followed @m.e.conroy's advice and added the splice functionality and thought it worked perfectly, especially because I removed the <code>location.reload()</code> and in the view it showed that the pictures were getting deleted without a refresh. However, when I do refresh the page the same "ghost" imgs and its delete buttons are showing up again.</p>
  
  <p>When I checked the AngularJS chrome extension for the scope models, it was showing that the outermost img (the img that is to the right of the "in-between" ghost imgs) is taking over the deleted images, meaning the deleted images are getting set with the same name, id, and other attributes of the outer most img object. Once again, according to the chrome extension the array elements are not removed but only replaced. Once I refresh though it goes back to the same issue I had before of "null" element in array. This is weird because in my Firebase dashboard it shows that the imgs are indeed deleted however it does not reflect on my view until the outer most img is deleted. Below is a view of my Firebase dashboard and index. Only when the img 24 is deleted does the changes actually apply. </p>
  
  <p><img src="https://i.stack.imgur.com/Goa6O.png" alt="enter image description here"></p>
  
  <hr>
  
  <p>EDIT2:
  As referenced by @katowulf in this article (<a href="https://www.firebase.com/blog/2014-04-28-best-practices-arrays-in-firebase.html" rel="nofollow noreferrer">https://www.firebase.com/blog/2014-04-28-best-practices-arrays-in-firebase.html</a>), I am having the exact problem he describes in the "Good Use Cases for Storing Data in Arrays" section. Currently, I am trying to target each and every one of the imgs after the one that I delete and change their IDs to <code>id - 1</code> as well as the imgs location in the fire ref to <code>firebar_url/ref - 1</code> but I feel like I am trying to force an implementation rather than finding the correct solution. Should I try to refactor my code to utilize objects like he suggests? (I tried that initially but I wasn't able to grab the objects and its attributes therefore had to rely on firebase snapshots to instantiate and create my array. Reference: <a href="https://stackoverflow.com/questions/25043005/how-would-i-convert-my-new-object-data-i-am-retrieving-from-firebase-into-the-js">How would I convert my new Object data I am retrieving from Firebase into the JSON form as I had before</a>). Any feedback is welcome. </p>
  
  <hr>
  
  <p>MY SOLUTION: To manually change index values as well as corresponding 'id' attributes to -1 for all img objects following the one that has been deleted.</p>
  
  <pre><code>$scope.deleteImg = function(index, img) {
      if (confirm('Are you sure you want to delete the Img?') === true) {
          $scope.imgs.splice(index,1); //remove objects in array
  
          var i; 
          for(i = index; i &lt; $scope.imgs.length; i++) {
              //I want to grab the next img object 
              var previousIndexID = i; //start from the picture right after the one deleted and change its id to id-1
              var newIndexID = i+1;
              var previousIndexLink = fireRef + "/" + previousIndexID;
              var newIndexLink = fireRef + "/" + newIndexID;
              var previousIndexRef = new Firebase(previousIndexLink);
              var newIndexRef = new Firebase(newIndexLink);
  
              var idIndexLink = fireRef + "/" + previousIndexID + "/id";
              var idIndexRef = new Firebase(idIndexLink);
  
              console.log(previousIndexRef.toString()); // element[index] that got deleted
              console.log(newIndexRef.toString());      // element[index] next img object
  
              //copy the next img object into the location of the object that just got removed() 'url/num-1' and 'url/id' value 
              newIndexRef.once('value', function(snap) {
                  var i = snap.val();
                  previousIndexRef.set(i);
              });
              idIndexRef.once('value', function(snap) {
                  var i = snap.val();
                  idIndexRef.set(i-1);
              }); 
  
          };
          // until the length is reached and then I want it to delete the last one
          var lengthID = $scope.imgs.length; 
          var lengthLink = fireRef + "/" + lengthID;
          var lengthRef = new Firebase(lengthLink);
          lengthRef.remove();
      }
  };
  </code></pre>
  
  <p>Next time I will most definitely use services/object style but for this app this works great. It was fun to solve it anyway :) Thanks for all the help @Kato and @m.e.conroy </p>