Pizza planet doesn't work, can't spot the error [SOLVED]


#1

While there was only the appetizers list it worked fine, showed all the data that was asked, but when i introduced $scope.mains it stopped working, I went and finished the project knowing it doesn't work :(. Hope someone can help.

HTML code:

<div class="main" ng-controller='MainController'>
      <div class="container">
        <h1>Specials for {{ today | date }}</h1>
        
        <h2>Appetizers</h2>
        <div class="appetizers row" ng-repeat="appetizer in appetizers">
          <div class="item col-md-9">
            <h3 class="name">{{ appetizer.name }}</h3>
            <p class="description">{{ appetizer.description }}</p>
          </div>
          <div class="price col-md-3">
            <p class="price">{{ appetizer.price | currency }}</p>
          </div>
        </div>

        <h2>Main Dishes</h2>
        <div class="mains row" ng-repeat="main in mains">
          <div class="item col-md-9">
            <h3 class="name"> {{ main.name }} </h3>
            <p class="description"> {{ main.description }} </p>
          </div>
          <div class="price col-md-3">
            <p class="price"> {{ main.price | currency}} </p>
          </div>
        </div>
        
        <h2>Extras</h2>
        <div class="extras row" ng-repeat="extra in extras">
          <div class="item col-md-9">
            <h3 class="name">{{ extra.name }}</h3>
            <p class="description">{{ extra.description }}</p>
          </div>
          <div class="price col-md-3">
            <p class="price">{{ extra.price | currency }}</p>
          </div>
        </div>
        
      </div>
    </div>

and the MainController code:

app.controller('MainController', ['$scope', function($scope) {
  $scope.today = new Date();

  $scope.appetizers = [
    {
      name: 'Caprese',
      description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
      price: 4.95
    },
    {
      name: 'Mozzarella Sticks',
      description: 'Served with marinara sauce.',
      price: 3.95
    },
    {
      name: 'Bruschetta',
      description: 'Grilled bread, garlic, tomatoes, olive oil.',
      price: 4.95
    }
  ];
  
  $scope.mains = [
     {
      name: 'Capricciosa',
      description: 'Ketchup, cheese, mushrooms, paprika, olives, spices.',
      price: 11.25
    },
    {
      name: 'Funghi',
      description: 'Ketchup, cheese, mushrooms, oregano, olives.',
      price: 11.95
    },
    {
      name: 'Margharita',
      description: 'Ketchup, cheese, oregano, olives.',
      price: 9.15
    }
  ];
  
  $scope.extras = [
    {
      name: 'Garlic Cheese Bread',
      description: 'Crispy, tasty bread.',
      price: 5.49
    },
    {
      name: 'Italian sausages',
      description: 'Nicely spiced, homemade sausages.',
      price: 6.99
    },
    {
      name: 'Meatballs',
      description: 'Delicious meatballs.',
      price: 5.49
    }
  ];
    

}]);

Appreciate the help.


#2

Hello ganrod,

Could you please post the solution if you were able to solve this yourself? (You have put [SOLVED] in the title)

Thanks!


#3

I was missing two commas ,, one in $scope.mains and the other in $scope.extras edited the post above so it's correct now.


#4

Hi ganrod. I was up all night trying to figure what in the heck I was doing wrong. Thanks to you , I can sleep now!


#5

Hello, I have same problem and I dont solve it. There are my code:

<!doctype html>

PizzaPlanet

<div class="main" ng-controller="MainController">
  <div class="container">
    <h1>Specials for {{ today | date }}</h1>
    
            <h2>Appetizers</h2>
    <div class="appetizers row" ng-repeat="appetizer in appetizers">
      <div class="item col-md-9">
        <h3 class="name">{{ appetizer.name }}</h3>
        <p class="description">{{ appetizer.description }}</p>
      </div>
      <div class="price col-md-3">
        <p class="price">{{ appetizer.price | currency }}</p>
      </div>
    </div>

  </div>
</div>

<div class="footer">
</div>

<!-- Modules -->
<script src="js/app.js"></script>

<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>

app.controller(‘MainController’, [’$scope’, function($scope) {
$scope.today = new Date();

$scope.appetizers = [
{
name: ‘Caprese’,
description: ‘Mozzarella, tomatoes, basil, balsmaic glaze.’,
price: 4.95
},
{
name: ‘Mozzarella Sticks’,
description: ‘Served with marinara sauce.’,
price: 3.95
},
{
name: ‘Bruschetta’,
description: ‘Grilled bread, garlic, tomatoes, olive oil.’,
price: 4.95
}
];

var app = angular.module(‘PizzaPlanetApp’, []);

Thank you for any advice.