Values defined in controller not being displayed


#1

In the browser, only the raw code is being displayed (e.g. "{{ program.series }}".

Code:

MainController.js

app.controller('MainController', ['$scope', function($scope) {
  $scope.program = {
    series: "Sherlock",
    series_img: "img/sherlock.jpg",
    genre: "Crime drama",
    season: 3,
    episode: "The Empty Hearse",
    description: "Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared     of all fraud charges against him, returns with Mycroft's help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.",
    datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
  };
}]);

relevant index.html

<div class="main" ng-controller="MainController">
  <div class="container">
    <div class="content">
      <div class="row">
        
        <div class="col-md-3" class="series_img" ng-src="{{ program.series_img }}">
        </div>
        
        <div class="col-md-6">
          <h1 class="series">{{ program.series }}</h1>
          <h2 class="episode">{{ program.episode }}</h2>
          <p class="description">{{ program.description }}</p>
        </div>

        <div class="col-md-3">
          <ul class="list-group">
            <li class="list-group-item"><span>Date:</span>{{ program.datetime |  date:'mediumDate' }} </li>
            <li class="list-group-item"><span>On air:</span>{{ program.dateTime | date:'EEEE' }} </li>
            <li class="list-group-item"><span>Time:</span>{{ program.dateTime | date:'shortTime' }}  </li>
            <li class="list-group-item"><span>Season:</span>{{ program.season }}  </li>
            <li class="list-group-item"><span>Genre:</span>{{ program.genre }}  </li>
          </ul>
        </div>
        
      </div>
    </div>
  </div>
</div>

#2

Maybe your problem is not in this "relevant" code. :stuck_out_tongue:

Maybe you didn't include ng-app in your body, or you made a spelling mistake on the name of your app, or maybe you didn't include the script stuff at the end of your index.html.


#4

I'm having the same problem. I checked all of your suggestions ninja, but everything looks right.


#5

What I did wrong was I added [] these brackets to the $scope.program as that was what was in the learning exercise. Once I took those brackets out it displayed fine.


#6

That worked for me too. Thanks!


#7

Thank you that was the same issue I was having with the []. emulated the exercise and the solution here was not the same expected.

Thanks!


#8

I'm having the same issue across all 3 exercises. On Bolt 1 I actually do get the bracketed variables. I tried deleting the square brackets from controller and no change. (You'd think it would break if anything) In the following 2 I just get the bracketed elements very quickly, then it goes to blank.

Could there be an issue with the browser emulator caching the old data? Super frustrating to have everything in order and have no feedback like I'm used to in other Codecademy courses.


#9

I'm with these guys. I absolutely can't get the values to display in the browser. I only get the raw, unparsed expressions.


#10

Make sure the module and the controller are connected.

The name of the variable ("var") in the app module has to equal the name of the app that comes before ".controller" on the controller. For example, if the module is written out as var myApp = angular.module('BoltNetworkApp', []); Then the controller should read like myApp.controller... etc.


#11

Hmmm, from what I can tell, that is the case.

In app.js I have

var app = angular.module('BoltNetworkApp', []);

And my controller is set up like this:

app.contoller... etc

#12

I faced same issue and made it work by following changes/edits
app.js

var BoltNetworkApp = angular.module('BoltNetworkApp', []);
MainController.js

BoltNetworkApp.controller('MainController', function ($scope) {
$scope.program = {
series: "Sherlock",
series_img: "img/1.jpeg",
genre: "Crime drama",
season: 3,
episode: "The Empty Hearse",
description: "Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared of all fraud charges against him, returns with Mycroft's help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.",
datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
}
});
index.html

  • Date: {{program.datetime | date}}

  • On air: {{program.datetime | date:'EEEE'}}

  • Time: {{program.datetime | date:'shortTime'}}

  • #13

    if you really wrote

    maybe that's the problem :stuck_out_tongue:


    #14

    Lol, yes. That would certainly cause a problem. :wink: But I didn't literally write that.


    #15

    I initially had some trouble getting values to show up. My problem was that I only used a single pair of curly braces for my expressions. Sometimes it helps to start the project over: Get Help -> I want to restart this project -> Reset project


    #16

    I have similar issue. Can not get expected results. Can some please help here what is wrong with my code

    Module definition:
    var app = angular.module('BoltNetworkApp', []);

    controller:
    app.controller('MainController', ['$scope', function($scope) {
    $scope.program {
    series: "Sherlock",
    series_img: "img/sherlock.jpg",
    genre: "Crime drama",
    season: 3,
    episode: "The Empty Hearse",
    description: "Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared of all fraud charges against him, returns with Mycroft's help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.",
    datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
    }
    }
    ]);

    View:





    <div class="main" ng-controller="MainController">
      <div class="container">
        <div class="content">
          <div class="row">
            
            <div class="col-md-3" class="series_img">
            </div>
            
            <div class="col-md-6">
              <h1 class="series"></h1>
              <h2 class="episode"></h2>
              <p class="description"></p>
            </div>
    
            <div class="col-md-3">
              <ul class="list-group">
                <li class="list-group-item"><span>Date:</span> {{ program.datetime | date:'mediumDate' }}</li>
                <li class="list-group-item"><span>On air:</span> {{ program.datetime | date:'EEEE' }}  </li>
                <li class="list-group-item"><span>Time:</span> {{ program.datetime | date:'shortTime' }}  </li>
                <li class="list-group-item"><span>Season:</span> {{ program.season }}  </li>
                <li class="list-group-item"><span>Genre:</span> {{ program.genre }} </li>
              </ul>
            </div>

    #17

    Hey Mallika. Did you manage to fix this exercise? Im having the same problem that only the raw code is displaying eg {{ program.series }} etc.


    #18

    i had the same issue and it was frustrating! i got it working thanks to dev support. the problem was i put a semi colon after the closing bracket of my object, $scope.program. these semi colons are only used when you have a property written after it. example:


    BROKEN

    $scope.program = {
    series: "Sherlock",
    series_img: "img/sherlock.jpg",
    genre: "Crime drama",
    season: 3,
    episode: "The Empty Hearse",
    description: "Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared of all fraud charges against him, returns with Mycroft's help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.",
    datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
    },


    WORKING

    $scope.program = {
    series: "Sherlock",
    series_img: "img/sherlock.jpg",
    genre: "Crime drama",
    season: 3,
    episode: "The Empty Hearse",
    description: "Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared of all fraud charges against him, returns with Mycroft's help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.",
    datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
    }


    #19

    I have a same problem.






    • {{picture.info}}


      {{picture.desc}}





    and controller is .controller('slider', function($scope) {
    $(document).ready(function(){
    $('.slider').slider({full_width: true});
    });
    $(document).ready(function(){
    $('.parallax').parallax();
    })
    $scope.pictures=[
    {
    img:"img/workPix/1st.jpg",
    info:" ",
    desc:" "
    },
    {
    img:"img/workPix/2012-oyu.jpg",
    info:"Transmission Line",
    desc:" "
    },
    {
    img:"img/workPix/20120929_092154.jpg",
    info:" ",
    desc:" "
    }
    ] ;})


    #20

    That was it!! Thank you :slight_smile:


    #21

    I had the same issue. Removing square brackets solved the problem.