Controller not recognizing object property

Question

This is an excerpt from my product document defined in MLab:

 {
"_id": {
    "$oid": "596161e1734d1d25634366ce"
},
 "images": {
    "regular": [
    "Amana Electric Range in Stainless Steel-1.jpg",
    "Amana Electric Range in Stainless Steel-2.jpg",
    "Amana Electric Range in Stainless Steel-3.jpg",
    "Amana Electric Range in Stainless Steel-4.jpg",
    "Amana Electric Range in Stainless Steel-5.jpg"
    ]
   }
}

This is an excerpt of the corresponding model in Mongoose:

const ProductSchema = new Schema({
    images:{}
});

var Product = mongoose.model('Product', ProductSchema, 'product');
module.exports=Product;

I am trying to access the images object in my controller as such:

init = function () {
        $scope.product = DataService.getProduct();
        console.log('productController.product = ', $scope.product)
        $mainImage = $scope.product.images.regular[0];
        $productImages = $scope.product.images.regular;
    };

But I get the following error:

angular.js:14700 TypeError: Cannot read property 'regular' of undefined
at init (productController.js:8)
at new <anonymous> (

I had a similar problem in Angular 2 and was able to solve it by defining my images object with the any type in my model:

images: any;

How do I solve this in Angularjs?

Additonal info:

getProduct() {
   return $filter('filter')(products, {'_id': productId});
}

Product produced by getProduct():

    [
  {
"_id": "596161e1734d1d25634366ce",
"producttype": "stove",
"name": "30 in. 4.8 cu. ft. Electric Range in Stainless Steel",
"brand": "Amana",
"model": "AER6303MFS",
"price": 199.9,
"list_price": "301.00",
"description": "This 30 in. Amana Electric Range comes with Bake Assist Temps to help you get dinner going. Simply choose a preset temperature setting to get started. Or, set your bake or broil temperatures with Easy Touch Electronic Controls Plus, which are extra-large and easy-to-read. And when you need to know how your dinner is doing without opening the oven door, the Extra-Large Oven Window lets you see and savor.",
"rating": 5,
"sku": "1002064151",
"warranty": "ANSI Certified,CSA Certified",
"images": {
  "stainless": [
    "Amana Electric Range in Stainless Steel-1.jpg",
    "Amana Electric Range in Stainless Steel-2.jpg",
    "Amana Electric Range in Stainless Steel-3.jpg",
    "Amana Electric Range in Stainless Steel-4.jpg",
    "Amana Electric Range in Stainless Steel-5.jpg"
  ],
  "white": [
    "Amana Electric Range in White-1.jpg",
    "Amana Electric Range in White-2.jpg",
    "Amana Electric Range in White-3.jpg",
    "Amana Electric Range in White-4.jpg"
  ],
  "black": [
    "Amana-black-1.jpg",
    "Amana-black-2.jpg",
    "Amana-black-3.jpg",
    "Amana-black-4.jpg",
    "Amana-black-5.jpg"
  ],
  "regular": [
    "Amana Electric Range in Stainless Steel-1.jpg",
    "Amana Electric Range in Stainless Steel-2.jpg",
    "Amana Electric Range in Stainless Steel-3.jpg",
    "Amana Electric Range in Stainless Steel-4.jpg",
    "Amana Electric Range in Stainless Steel-5.jpg"
  ]
},
"specifications": {
  "dimensions": [
    {
      "value": "45.25",
      "title": "Depth With Door(s) Open 90 Degrees (In.)"
    },
    {
      "value": "25",
      "title": "Oven Interior Depth (in)"
    },
    {
      "value": "18.38",
      "title": "Oven Interior Height (in)"
    },
    {
      "value": "19",
      "title": "Oven Interior Width (in)"
    },
    {
      "value": "27.2",
      "title": "Product Depth (in.)"
    },
    {
      "value": "46.25",
      "title": "Product Height (in.)"
    },
    {
      "value": "29.88",
      "title": "Product Width (in.)"
    },
    {
      "value": "30 in.",
      "title": "Range Size"
    }
  ],
  "details": [
    {
      "value": "Gas Range",
      "title": "Appliance Type"
    },
    {
      "value": "Cast Iron",
      "title": "Burner Grate Material"
    },
    {
      "value": "9500",
      "title": "Burner No.1 BTU"
    },
    {
      "value": "15000",
      "title": "Burner No.2 BTU"
    },
    {
      "value": "5000",
      "title": "Burner No.3 BTU"
    },
    {
      "value": "15000",
      "title": "Burner No.4 BTU"
    },
    {
      "value": "5.1",
      "title": "Capacity of Oven (cu. ft.)"
    },
    {
      "value": "Manual Clean",
      "title": "Cleaning Type"
    }
  ]
},

"feature": [
  "Large 4.8 cu. ft. oven capacity with space for dinner and dessert",
  "Versatile cooktop with multiple element options up to 1,800 watts",
  "Bake Assist Temp presets make cooking even more convenient"
],
"$$hashKey": "object:181"

} ]

I understand that, but please show us the logged result, so that we can tell you where you are making the mistake in accessing the properties. — Jorge Valle
– Jorge Valle, Commented Oct 5, 2017 at 1:03

Jorge Valle · Accepted Answer · 2017-10-05 01:26:09Z

2

You have to specify the index of the array item you want, in this case, 0.

$scope.product[0].images.regular[0];

answered Oct 5, 2017 at 1:26

Jorge Valle

5125 silver badges7 bronze badges

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

1 Comment

koque Over a year ago

Thanks, Jorge. I missed that.

Jesus Carrasco · Accepted Answer · 2017-10-05 01:30:15Z

0

The problem is that your DataService.getProduct its a promise so you need to resolve and asign values when promise ends success.

try this change of your code.

init = function () {
    $scope.product = DataService.getProduct(function(product){
         console.log('productController.product = ', product)
         $mainImage = product.images.regular[0];
         $productImages = product.images.regular;
    }, function(error){

    }); //this if is a resource with $resource.

    $scope.product = DataService.getProduct().then(function(product){
         console.log('productController.product = ', product)
         $mainImage = product.images.regular[0];
         $productImages = product.images.regular;
    }, function(error){

    }); // this if is a factory with $http

};

This is a common case of async. process.

UPDATE

the getProduct Return an array so you need to acces the array first.

so

  $scope.product = DataService.getProduct();

  $mainImage = $scope.product[0].images.regular[0];
  $productImages = $scope.product[0].images.regular;

edited Oct 5, 2017 at 1:30

answered Oct 4, 2017 at 23:35

Jesus Carrasco

1,3541 gold badge11 silver badges16 bronze badges

2 Comments

koque Over a year ago

That did not entirely solve the problem, Jesus, getProduct() does not return a promise. I have added the getProduct() method in my original question. It is producing the expected data.

Jesus Carrasco Over a year ago

check the update.... cause i didtn know the getProduct returns i guess for the async problem.... now i see it regurns an array instead of an object like you post in the question who was an object.

Collectives™ on Stack Overflow

Controller not recognizing object property

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related