MoSheikh MoSheikh - 5 months ago 26
Javascript Question

Angular.js ng-repeat issue

I'm just starting out with Angular and I'm following CodeSchool's videos. The first part went smoothly, but when trying to replicate the "ng-repeat" part for an array, the html doesn't display the values of the objects, just the directives.

app.js:

(function () {
var app = angular.module('store', []);

app.controller('StoreController', function(){
this.products = gems;


});

var gems = {
{
name: 'Dodecaherdron',
price: 2.95,
description: 'This is a Dodecahedron',
canPurchase: true,
},
{
name: "Pentagonal Gem",
price: 5.95,
description: "This is a Pentagonal Gem",
canPurchase: true,
}
}
})();


html:







<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<h1>{{product.name}} </h1>
<h2>${{product.price}}</h2>
<p>{{product.description}}</p>
<button ng-show="product.canPurchase">Add to Cart</button>
</div>


<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>




Again, the code worked when trying with a single gem as a product, but not when I added the second "Pentagonal Gem", even though I followed the video's code word-by-word to check. The html site displays exactly what is written in the html document under the h1, h2, and h3 headings. Help would be greatly appreciated.

Answer

You need to make gems an array rather than an object.

var gems = [{
  name: 'Dodecaherdron',
  price: 2.95,
  description: 'This is a Dodecahedron',
  canPurchase: true,
}, {
  name: "Pentagonal Gem",
  price: 5.95,
  description: "This is a Pentagonal Gem",
  canPurchase: true,
}];
Comments