ng-repeat not iterating array

Question

I'm not to Angular and just keep bumping into small problems here and there. I can't seem to get my array to display out, it just shows the {{products}}

JS Fiddle: http://jsfiddle.net/u5eBH/70/

HTML:

<div ng-app="products">
    <div ng-controller="ProductCtrl">

        <input type="checkbox" ng-click="includeBrand('Brand A')"/>Brand A<br>
        <input type="checkbox" ng-click="includeBrand('Brand B')"/>Brand B<br>
        <input type="checkbox" ng-click="includeBrand('Brand C')"/>Brand C<br>

        <ul>
            <li ng-repeat="p in products | filter:brandFilter">
                {{name}}
            </li>
        </ul>
        </div>
        </div>

JS

'use strict'

angular.module('products', []);

function ProductCtrl($scope) {
    $scope.products = [
        {
                        name:  'XXX-1A'
                        brand: 'Brand A',
                        material: 'tobacco',
                        size: '00',
                        type: 'water pipe',
                        style: 'heady',
                        feature: 'bent neck, coil condensor',
                        percolator: 'dome',
                        color:'red'
                    },
                    {
                        name:  'XXX-2B'
                        brand: 'Brand B',
                        material: 'tobacco',
                        size: '00',
                        type: 'water pipe',
                        style: 'heady',
                        feature: 'bent neck, coil condensor',
                        percolator: 'dome',
                        color:'red'
                    },
                    {
                        name:  'XXX-1C'
                        brand: 'Brand C',
                        material: 'tobacco',
                        size: '00',
                        type: 'water pipe',
                        style: 'heady',
                        feature: 'bent neck, coil condensor',
                        percolator: 'dome',
                        color:'red'
                    }
                ];
            });

    $scope.brandIncludes = [];

    $scope.includeBrand = function(brand) {
        var i = $.inArray(brand, $scope.brandIncludes);
        if (i > -1) {
            $scope.brandIncludes.splice(i, 1);
        } else {
            $scope.brandIncludes.push(brand);
        }
    }

    $scope.brandFilter = function(products) {
        if ($scope.brandIncludes.length > 0) {
            if ($.inArray(products.brand, $scope.brandIncludes) < 0)
                return;
        }

        return products;
    }
}

Also if someone could link me to some more in depth talks about the "ng-repeat="x in x " statement, I would greatly appreciate it. I just can't understand it well enough to use in myself. Thanks!

It is, but it needs to be {{p.name}} rather than {{name}} — Callum Linington
– Callum Linington, Commented Feb 25, 2015 at 20:19

floribon · Accepted Answer · 2015-02-25 20:25:32Z

1

You forgot some commas in your JSON definition. When angular fails to evaluate {{ curly brackets }}, be sure to check your dev console for errors.

For instance:

{
  name: 'XXX-1A'       // <-- here you don't have a comma (same for each item)
  brand: 'Brand A',
  material: 'tobacco',
  size: '00',
  type: 'water pipe',
  style: 'heady',
  feature: 'bent neck, coil condensor',
  percolator: 'dome',
  color: 'red'
},

Also as pointed out by a comment, it should be {{p.name}} instead of {{name}}

Here is a fixed fiddle:

http://jsfiddle.net/a01g8wyp/

answered Feb 25, 2015 at 20:25

floribon

19.2k5 gold badges56 silver badges68 bronze badges

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

6 Comments

knocked loose Over a year ago

That's perfect! Thanks so much! I did check my dev console and was getting "products is not a module" earlier, and wasn't sure what to do from there.

floribon Over a year ago

mmh, when I open your jsfiddle and check my console, I have Uncaught SyntaxError: Unexpected identifier and when I click on the line it shows me clearly the missing comma. Oh yeah and then a no Module error that is a side effect of the first one: always fix your errors in the order you get them.

floribon Over a year ago

By the way your usage of brandFilter seems weird: a filter in a ng-repeat will process each product and should return true is you want to display it, false otherwise. Your code does work but it is a bit strange that you named the parameter products (plural) and return the whole product instead of true.

knocked loose Over a year ago

Either I overlooked that error (somehow), misread it, or it didn't appear, because I just opened up my old version and found it. Weird day, too much staring at a computer, thanks for the help!

knocked loose Over a year ago

I have been trying to make it so i can have multiple selected checkboxes and this was the only way I could figure it out

|

Collectives™ on Stack Overflow

ng-repeat not iterating array

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related