CODEWITHSUNDEEP
angularjs
inimene
inimene

Reputation: 1650

Unexpected token: D thrown with $http.get()

So I have this simple Angular app that I am trying to run, but this error keeps getting thrown: SyntaxError: Unexpected token: D.

Here is the code:

html

<!DOCTYPE html>
<html lang="en" ng-app="spring-learning">
<head>
    <base href="/">
    <title>Index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="UTF-8" />

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>

    <script src="angular/app.js"></script>
    <script src="angular/routes.js"></script>
    <script src="angular/controllers/index.js"></script>
</head>
<body>
    <header>
        <!-- Header bar-->
    </header>

    <main>
        <div ng-controller="IndexCtrl">
            <a href="xml" >To XML</a>
            <p>Greeting: {{ greeting }}</p>
            <p>The ID is {{greeting.id}}</p>
            <p>The content is {{greeting.content}}</p>
        </div>
        <p>Index</p>
    </main>
</body>
</html>

js

'use strict';

var app = angular.module('spring-learning', ['ngRoute', 'ngResource']);

app.config([
    '$httpProvider', function($httpProvider) {
        var authToken;
        //authToken = $("meta[name=\"csrf-token\"]").attr("content");
        $httpProvider.defaults.headers.common["X-CSRF-TOKEN"] = authToken;
        //$httpProvider.interceptors.push('InterceptorService');
    }
]);


app.controller('IndexCtrl', [
    '$scope', '$rootScope', '$location', '$http', function($scope, $rootScope, $location, $http) {

        $http.get("rest").
            success(function(data, status, headers, config) {
                console.log(JSON.parse(data));
                $scope.greeting = data;
            }).
            error(function(data, status, headers, config) {

            });
    }
]);

app.config([
    '$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider.when('xml', {
            templateUrl: 'templates/xml.html',
            controller: 'XmlCtrl'
        }).when('phones/:phoneId', {
            templateUrl: 'partials/phone-detail.html',
            controller: 'PhoneDetailCtrl'
        }).otherwise('/');

        $locationProvider.html5Mode(true);
    }
]);

Some lines have been commented out in $httpProvider config because they seem to not work here, but they did when I used them in my Ruby on Rails developemnt.

But to the matter, when I delete the part $http.get(...), the error will dissapear. I fail to understand what has gone wrong in my syntax in that get method.

Upvotes: 1

Views: 2138

Answers (1)

Beri
Beri

Reputation: 11610

You must return JSON in your get method. It should look like:

{ id: 1, content: 'somthing I want to say', header: 'Hello' }

And your HTML code for this controller:

 <div ng-controller="IndexCtrl">
    <a href="xml" >To XML</a>
    <p>Greeting: {{ greeting.header }}</p>
    <p>The ID is {{greeting.id}}</p>
    <p>The content is {{greeting.content}}</p>
 </div>

You had one problem with your JSON. If greeding (server response) would be a text, than expressions greeting.id and greeting.content would fail, due to they are not JS Objects, or JSON's.

If your rsponse is a JSON, than {{ greeting}} would print an [object].

Tip: If your server response type is Text, and you don't know how to change it to JSON, you could use JSON.parse, like so:

 $scope.greeting = JSON.parse(data);
 console.log($scope.greeting);

Upvotes: 1

Related Questions