Object elements aren't being displayed


#1

I'm on step 3 Workflow, of first lesson Learn AngularJS 1.X

I got it ti show string values from the MainController.js, but it won't show object elements.

So my MainController.js looks like this:

app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'izaberi zrno po svom ukusu';
$scope.promo= 'samo danas mozes isprobati sva zrna';
$scope.product = {
name: 'The Book of Trees',
price: 19
};
}]);

and

the place where I call the object elements to show in the view, looks like this;

<p class="title">{{ product.name }}</p>
<p class="price">{{ product.price }}</p>

I'm not including rest of the html, cause it is showing book title and promo text just fine, so I'm guessing the problem is with the format of expressions that are calling on the object?


#2

Hey @ellablun,
you got a few little mistakes in your code.


EDIT: the part with $scope.products instead of $scope.product comes later.
Try removing the semicolon ; after the closing curly bracket } below price.

So it looks like

$scope.product = { 
    name: 'The Book of Trees', 
    price: 19 
}

Maybe that's the solution to your problem.

I would have to see both of your codes to better judge about it.


First, it's $scope.products, not $scope.product (missing s )
Second, $scope.products is an array. Use edged brackets [ ] instead of curly brackets { }

Take this as a reference:

$scope.products = [
    {
        name: 'The Book of Trees', 
        price: 19, 
    }
];

Hope this will help you. :slight_smile:


If you get further problems with the AngularJS-course, feel free to get in touch with me. :smiley:*


#3

thanks for your effort. Half a year ago I went trough these lessons, and now, half of the code seems to be left from previous pass, and the other half I need to add now. Super weird.


#4

She’s actually two exercises before what you’re saying. I have almost the same problem. The name was showing, but the price wasn’t. Checked the code, everything looked fine, but the price wasn’t displaying. Not even the unrendered expression.
What you told her came after you replace the single product with the array of books.

I think there might be a bug on the part ellablun and I are talking about


#5

A link to the exercise in question for this bumped topic would be dearly apreciated. Thank you. It will at least help us to gain our bearings and sample this issue if we are on the right page.


Belay, belay. Found it…

Workflow

First off, this should clear up any question of what is the actual controller data…

<div ng-repeat="product in products" class="col-md-6">

products is in scope, so that must be the name we will find in the controller data array.

$scope.products = [

My code from 2015 is rendering today; but, I daren’t Reset it. With a problem of this nature we must resort to studying your code. Please post the source code for the view and the controller. We can compare to ours, given it still works.


#6

This is the code as it is today:

    <div class="main" ng-controller="MainController">
      <div class="container">

        <h1> {{ title }} </h1>
        <h2>{{ promo }}</h2>
       <div ng-repeat="product in products" class="col-md-6"> 
        <div class="thumbnail"> 
          <img ng-src="{{ product.cover }}"> 
          <p class="title">{{ product.name }}</p> 
          <p class="price">{{ product.price | currency }}</p> 
          <p class="date">{{ product.pubdate | date }}</p>
          <div class="rating">
            <p class="likes" ng-click="plusOne($index)">+ {{ product.likes }} </p>
            <p class="dislikes" ng-click="minusOne($index)">- {{ product.dislikes }} </p>
          </div>
        </div> 
			</div>

      </div>
    </div>

The price is still not showing. I actually think it’s only that there’s a bootstrap class missing, but I’m not sure.
The exercise is still given as valid, although I cannot see the price


#7

The only bootstrap classes are header, container, footer, and col-md-6 which splits the main content into two columns. The .price class is in our custom style sheet.

Do you have a green dot at the top right corner of each product view?

book_end_ss

(not to scale)


#8

I do have that green circle. I just realized where it was supposed to appear… Darn it. Thanks for all the help and patience