$parse:syntax Syntax Error in AngularJS

Question

i have a program that sorts words based on Authors, which is an array. i am recieving the $parse:syntax error in the console; however, the program is executing and returning the right results. i'm not sure what is causing this problem. I am sorting the words using other attributes like Tags and Books; however, this console error is only being presented by some instances in these arrays.

this is how it looks: view

the error is as follows:

angular.js:13236 Error: [$parse:syntax] Syntax Error: Token 'Baggins' is an unexpected token at column 7 of the expression [Frodo Baggins] starting at [Baggins].
http://errors.angularjs.org/1.5.0/$parse/syntax?p0=Baggins&p1=is%20an%20unexpected%20token&p2=7&p3=Frodo%20Baggins&p4=Baggins
    at http://localhost:8080/node_modules/angular/angular.js:68:12
    at Object.AST.throwError (http://localhost:8080/node_modules/angular/angular.js:13816:11)
    at Object.AST.ast (http://localhost:8080/node_modules/angular/angular.js:13586:12)
    at Object.ASTCompiler.compile (http://localhost:8080/node_modules/angular/angular.js:14040:31)
    at Parser.parse (http://localhost:8080/node_modules/angular/angular.js:14927:29)
    at $parse (http://localhost:8080/node_modules/angular/angular.js:15035:39)
    at http://localhost:8080/node_modules/angular/angular.js:20463:17
    at Array.map (native)
    at processPredicates (http://localhost:8080/node_modules/angular/angular.js:20452:26)
    at http://localhost:8080/node_modules/angular/angular.js:20416:22(anonymous function) @ angular.js:13236(anonymous function) @ angular.js:9965Scope.$digest @ angular.js:16682Scope.$apply @ angular.js:16928clickListener @ angular-material.js:14066defaultHandlerWrapper @ angular.js:3398eventHandler @ angular.js:3386
angular.js:13236 Error: [$parse:syntax] Syntax Error: Token 'Baggins' is an unexpected token at column 7 of the expression [Frodo Baggins] starting at [Baggins].
http://errors.angularjs.org/1.5.0/$parse/syntax?p0=Baggins&p1=is%20an%20unexpected%20token&p2=7&p3=Frodo%20Baggins&p4=Baggins
    at http://localhost:8080/node_modules/angular/angular.js:68:12
    at Object.AST.throwError (http://localhost:8080/node_modules/angular/angular.js:13816:11)
    at Object.AST.ast (http://localhost:8080/node_modules/angular/angular.js:13586:12)
    at Object.ASTCompiler.compile (http://localhost:8080/node_modules/angular/angular.js:14040:31)
    at Parser.parse (http://localhost:8080/node_modules/angular/angular.js:14927:29)
    at $parse (http://localhost:8080/node_modules/angular/angular.js:15035:39)
    at http://localhost:8080/node_modules/angular/angular.js:20463:17
    at Array.map (native)
    at processPredicates (http://localhost:8080/node_modules/angular/angular.js:20452:26)
    at http://localhost:8080/node_modules/angular/angular.js:20416:22(anonymous function) @ angular.js:13236(anonymous function) @ angular.js:9965Scope.$digest @ angular.js:16682processQueue @ angular-material.js:1316(anonymous function) @ angular.js:18744completeOutstandingRequest @ angular.js:5804(anonymous function) @ angular.js:6081

the JSON is as follows

{
"expression": "to the day",
"meaning": "",
"example": "it's been four years to the day.",
"pronunciation": "",
"notes": "",
"meta": {
"book": ["There and back again"],
"author": ["Frodo Baggins"],
"tags": ["middle earth"]}
},

the code in the view is as follows:

<md-input-container>
        <label>Books</label>
        <md-select ng-model="book">
            <md-option ng-repeat="book in books | orderBy: book" value="{{ book }}"> <!-- books here refers to a newly defined array that stores only one instance of all the books against the 'book' property on each object/word -->
                {{ book }} 
            </md-option>
        </md-select>
    </md-input-container>

the code in the controller is as follows:

function getBooks(classifieds) {

        var books = [];
        angular.forEach(classifieds, function(item) {
            if (item.meta) {    
                angular.forEach(item.meta.book, function(b) {

                    books.push(b);
                });
            }

        });

        return _.uniq(books);

    }

install chrome and try you page with it. in the debug you can click on error, it will open a page on the angular web site. this page will explain the error a little bit — AlainIb
– AlainIb, Commented Mar 24, 2016 at 6:33
$scope.books = getBooks(classifieds); this calls the getBooks function shown above — Nosail
– Nosail, Commented Mar 24, 2016 at 6:45

Gene · Accepted Answer · 2016-03-24 07:53:00Z

1

Simple answer I think - the order by should read: | orderBy:'book' https://docs.angularjs.org/api/ng/filter/orderBy

answered Mar 24, 2016 at 7:53

Gene

6164 silver badges8 bronze badges

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

4 Comments

Nosail Over a year ago

oh yes.. i added it within the quotes. <md-option ng-repeat="book in books | orderBy: 'book'" value="{{ book }}"> no runtime error. however, the values in the Tag array are not being sorted alphabeticaly now. strangely, they were before i added it within quotes.

Nosail Over a year ago

book not included within quotes -- i was getting the aforementioned runtime error; however, the values were being ordered by/sorted alphabetically in the book list || book included within quotes -- i am not getting the aforementioned runtime error; however, the values now are not being ordered by/sorted alphabetically.

Nosail Over a year ago

in my first comment to your response i meant -- however, the values in the BOOK array (not Tag) are not being orderedby/sorted alphabeticaly now. strangely, they were before i added it within quotes.

Nosail Over a year ago

it works now. i figured primitives don't sort by default, but one can pass in a function. Changed the orderBy to orderBy: 'toString()'.<md-option ng-repeat="book in books | orderBy: 'toString()'" value="{{ book }}">

Collectives™ on Stack Overflow

$parse:syntax Syntax Error in AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related