AngularJS and returning object in javascript array via function

Question

I am having troubles trying to return an object within an array in an if-else loop within a function.

Basically, I want to return the first item object in the array and the getItemDetails will run and get the first item and then if triggered again, it will clear the array and write the other item object to it.

I have a service called ItemService that contains the following function:

  getItemDetails: function(details) {

      if (itemDetails.length == 0) {


        itemDetails.push(details);


        return itemDetails;

        console.log(itemDetails[0].name);
      }
      else {

        itemDetails = [];

        itemDetails.push(details);

        console.log (itemDetails[0].name);

        return itemDetails;

        console.log(itemDetails[0].name);

      } 

This is the controller:

.controller("itemListingDetailCtrl", function ($scope, itemService, $stateParams, $state)
{

  $scope.name = itemService.getItemDetails()[0].name;
  $scope.description = itemService.getItemDetails()[0].desc;

})

Here is the accordion that contains the onSelectItems function that takes a JSON object as a parameter.

<ion-item class="item-accordion"
                        ng-repeat="item_type in item.subcategories"
                        ng-show="isGroupShown(beer)"
                        ng-click="onSelectItems(item_type)">
                  {{item_type.name}}
             </ion-item>

Whenever it runs, I can see in the console logs that I receive the following error:

Cannot read property 'name' of undefined
    at Object.getItemDetails 

If I remove the if else loop and simply push the item to the array and return itemDetails, it will give me the correct first item in the array. Any ideas?

Thanks in advance.

Answer 1

First important thing is that if-else is not a loop, but a conditional statement, loop examples are while and for. You can read more about control flow and loops in JS on MDN.

The error which you're getting is because you expect details to be always defined when passed as an argument to getItemDetails. You're accessing its name property in this line: console.log (itemDetails[0].name);. But in the controller code you're calling itemService.getItemDetails() without any argument, so details is undefined and a TypeError is thrown.

If you want this to work you should pass a valid object to the getItemDetails. Still please think a bit about the design, the role of getItemDetails is unclear to me. You're just wrapping the details object into an Array, you don't really need a service to do this.

Additionally in the getItemDetails function you have unreachable code. The console.log immediately after return statements won't be executed. You should remove it.