AngularJS Unexpected token < in JSON at position 0 in ng-view

Question

I have a little problem. I'm working on angularjs single web application page and I'm trying to do add SockJS in angular module.

This is my main page.

<html ng-app="myApp">
    <head>
        <title>Timeline Page</title>
        <meta charset="utf-8">
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
        <link href="css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
        <link href="css/plugins-md.min.css" rel="stylesheet" type="text/css" />
        <link href="css/layout.min.css" rel="stylesheet" type="text/css" />
        <link href="css/light.min.css" rel="stylesheet" type="text/css" id="style_color" />
        <link href="css/custom.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="page-container-bg-solid page-md">
        <div ng-view></div>
    </body>
    <script type="text/javascript" src="js/lib/angular.min.js"></script>
    <script type="text/javascript" src="js/lib/angular-route.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/lib/sockjs-0.3.4.js"></script>
    <script type="text/javascript" src="js/lib/stomp.js"></script>
</html>

This is the js code.

var myApp = angular.module('myApp', ['ngRoute', 'myApp.controllers', 'myApp.services', function () {
        var socket = new SockJS('/hello');
        stompClient2 = Stomp.over(socket);
        stompClient2.connect({}, function (frame) {
            con = true;
            console.log('Connected: ' + frame);
            stompClient2.subscribe('/topic/greetings', function (greeting) {
                showGreeting(JSON.parse(greeting.body).content);
            });
        });
    }]);

When I try this, I have this problem:

Uncaught SyntaxError: Unexpected token < in JSON at position 0

I have many pages and I want to open one socket when I open the page but it's not working. Anyone can help me?

EDIT Greeting.class

public class Greeting {

    private String content;

    public Greeting(String content) {
        this.content = content;
    }

    public String getContent() {
        return content;
    }

}

GreetingController.class

@Controller
public class GreetingController {

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) throws Exception {
        //Thread.sleep(1000); // simulated delay
        return new Greeting("Hello, " + message.getName() + "!");
    }

}

Can you log the content of `greeting`? – Arun Ghosh Aug 16 '16 at 14:31 — Arun Ghosh, Aug 16 '16 at 14:31
Problem solved. It was just securty issues. – Gürsel Aug 17 '16 at 09:09 — Gürsel, Aug 17 '16 at 09:09

score 2 · Answer 1 · answered Aug 16 '16 at 14:32

2

It seems as though whatever is coming back from greeting.body is not a valid json string.

Given that your error has a < in position 0 I would assume that html is coming back from your API instead on accident.

answered Aug 16 '16 at 14:32

Naftali

144,921
39
244
303

I tried same codes in different project with one page and it's working but when I try single web page application like this. it's not working. I don't think that's the case. – Gürsel Aug 16 '16 at 14:44
I added the classes. – Gürsel Aug 16 '16 at 14:50
@Gürsel Please log out what you get as `greeting.body` in JS. your Java views are of no use to me... – Naftali Aug 16 '16 at 14:51
I'm just trying to connect to socket, I don't send anything yet in here. – Gürsel Aug 16 '16 at 14:52

score -1 · Answer 2 · answered Aug 16 '16 at 14:32

You must have invalid JSON response. Removing JSON.parse should help to avoid this error. However, you should just probably work on the server side.

You can use JSON Lint to verify the response JSON.

var myApp = angular.module('myApp', ['ngRoute', 'myApp.controllers', 'myApp.services', function () {
        var socket = new SockJS('/hello');
        stompClient2 = Stomp.over(socket);
        stompClient2.connect({}, function (frame) {
            con = true;
            console.log('Connected: ' + frame);
            stompClient2.subscribe('/topic/greetings', function (greeting) {
                showGreeting(greeting.body);
            });
        });
    }]);

AngularJS Unexpected token < in JSON at position 0 in ng-view

2 Answers2