Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AngularJS An Introduction to Two-Way Data Binding Lists

Richard Nash
Richard Nash
24,862 Points
Posted by Richard Nash
Richard Nash
24,862 Points

My code is not working... what am i missing here?

Here is my code for this challenge:

<ul>
    <li ng-repeat="name in bowlOfFruit">{{bowlOfFruit.name}}</li>
  </ul>

But the list is not printing out the names, only bullet points. What might I be missing here?

index.html 
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>Angular.js</title>
  <script src="js/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="myController">

  <ul>
    <li ng-repeat="name in bowlOfFruit">{{bowlOfFruit.name}}</li>
  </ul>

</body>
</html>
app.js 
angular.module('myApp', [])
.controller('myController', function ($scope, $http) {
  $scope.bowlOfFruit = [
    {name: 'Apple'},
    {name: 'Pear'},
    {name: 'Orange'}
  ];
});

2 Answers

kareem Pierre
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
kareem Pierre
Full Stack JavaScript Techdegree Student 20,263 Points
kareem Pierre
.a{fill-rule:evenodd;}techdegree
kareem Pierre
Full Stack JavaScript Techdegree Student 20,263 Points

So in your expression(the double brackets) your inserting bowlOfFruit.name. You should instead insert name.name as that is the name of the reference you placed to reference bowloffruit.

Richard Nash
Richard Nash
24,862 Points
Richard Nash
Richard Nash
24,862 Points

hmmm... I don't think I'm following the logic then. name.name is not making sense to me.

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Richard,

You created an array of objects with one property - name.

When you use ng-repeat its similar to a for each loop. Since you wrote name in bowlOfFruit, to get the name value in each object, you do name.name.

I'll give you an example to help.

 $scope.products = [
    {name: 'Apple'},
    {name: 'Pear'},
    {name: 'Orange'}
  ];

<ul>
    <li ng-repeat="product in products">{{product.name}}</li>
  </ul>

Hope this makes it clearer.

haunguyen
haunguyen
14,985 Points
haunguyen
haunguyen
14,985 Points

Think of ng-repeat as a foreach loop. It actually is a foreach loop, the angular inventors just want to have their own naming convention.

So, ng-repeat="name in bowlOfFruit" is like foreach(fruit in bowloffruits).

The best way to make your code easier to understand for you and other people is to pluralize the array variable and singularize the individual items in the array.

ng-repeat="fruit in bowlOfFruits" would be more intuitive to understand