Angular.js ng-repeat issue

Question

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.

You're defining gems as an object – do you mean to define an array? — Teddy Cross
– Teddy Cross, Commented Jun 10, 2016 at 1:33
I'd be very surprised if there's not errors in your JavaScript console. You should see "Uncaught SyntaxError: Unexpected token {" — Phil
– Phil, Commented Jun 10, 2016 at 1:34
@Phil Brackets seems to be giving me a number of errors even when the code is working so I didn't catch it. Thank you though! — MoSheikh
– MoSheikh, Commented Jun 10, 2016 at 1:39

Steven Wexler · Accepted Answer · 2016-06-10 01:34:20Z

1

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,
}];

answered Jun 10, 2016 at 1:34

Steven Wexler

17.5k8 gold badges59 silver badges83 bronze badges

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

Comments

Akinjide · Accepted Answer · 2016-06-10 01:40:56Z

0

You are currently using gem variable as an Object, you need to make it an Array, either by running a loop to push in each Object or just wrapping your inner Object inside square brackets.

(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,
    }];
  });
})();

answered Jun 10, 2016 at 1:40

Akinjide

2,76324 silver badges28 bronze badges

Collectives™ on Stack Overflow

Angular.js ng-repeat issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related