Ionic controller $http.get JSON Errors


#1

Hi guys!

Ionic noob here visiting the forums for the first time today. First of all, sorry if I’m posting in the wrong sub or if my question has already been answered. I tried looking for a solution but am resorting to the forums now. I am also aware that this question might be more AngularJS specific so go ahead and hate if that’s the case :wink:

I’ve been able to set up my controller with no problem but having my data in a seperate json file is causing some problems.

When I try to open a page which needs to pull data from the controller I get the following errors:

SyntaxError: Unexpected token }
    at Object.parse (native)
    at fromJson (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8764:14)
    at defaults.defaults.transformResponse (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15113:18)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:15061:12
    at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7950:18)
    at transformData (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15060:3)
    at transformResponse (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15754:17)
    at wrappedCallback (http://localhost:8100/lib/ionic/js/ionic.bundle.js:19197:81)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:19283:26
    at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20326:28) 

This is the code in my Controllers.js

angular.module('starter.controllers', [])

.controller('DishesCtrl', function ($scope, $http){
        $http.get('js/dishes.json').success(function(data) {
          $scope.dishes = data;
        })
})


.controller('DishCtrl', function($scope, $routeParams) {

   $http.get('js/dishes.json').success(function(data) {

          var dish = data.filter(function(entry){
            return entry.title === $scope.title;
          })[0];

          console.log(dish);
})
});

And here’s my .json

[
 	{
    "title": "beef",
    "cat": 1,
    "prep": "5 minutes",
    "cook": "20 minutes",
    "img": "/img/maindishes.jpg",
    "description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.",
  	},
  	{
    "title": "chicken",
    "cat": 2,
    "prep": "5 minutes",
    "cook": "20 minutes",
    "img": "/img/paleo.jpg",
    "description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.",
  	},
]

I feel like I’m making a really silly mistake here (or going completely the wrong way).

Thanks a lot in advance and hopefully I’ll be around the forums more often :slight_smile:

Cheers!

Steve


#2

try throwing your json in here: http://jsonlint.com/ Does not seem to be valid


#3

Hi @HesiDev,

I could be wrong, but I think it is your commas. You appear to have commas on every last element. The last item in an object and the last object in the array should not end with a comma.

Let me know if that changes anything for you.

Regards,


#4

I am also receiving this error but in my case, not all phones prompt this error. Some phone works smoothly without any error and some phones has the error. Maybe not all phones supports $http service using Ionic? Hoping for a solution on this too.


#5

I am also receiving this error, but in my case when the network speed is the request is successfully completed.But on slower networks the error comes. Can anyone help me out how to resolve this issue.

I am making a $http("/getLogs/") request to a server.

Error:
ionic.bundle.js:25510 SyntaxError: Unexpected token } in JSON at position 7571
at Object.parse (native)
at fromJson (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14411:14)
at defaultHttpResponseTransform (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22428:16)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:22519:12
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13516:20)
at transformData (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22518:3)
at transformResponse (http://localhost:8100/lib/ionic/js/ionic.bundle.js:23274:23)
at processQueue (http://localhost:8100/lib/ionic/js/ionic.bundle.js:27747:28)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:27763:27
at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:29026:28)