Error 400 when retrieving JSON with $http.get in AngularJS

Question

I get an error 400 when i try to retrieve the JSON from this URL below with $http.get.

$http.get('https://api.spotify.com/v1/search?q=artist:Owl+City+title:On+The+Wing&type=track&limit=1').
  success(function(data) {
    console.log("Success");         
  })
    .error(function(error, status, headers, config) {
      console.log(status);
      console.log("Error occured");
    });

I manage to retrieve it with this :

$.getJSON('https://api.spotify.com/v1/search?q=artist:Owl+City+title:On+The+Wing&type=track&limit=1').then(function (data) { console.log("Success");});

But the problem is that when i try to change a value in my $scope with this method, it 's only displayed in the view, one action after, because of that i get the previous song info and not the current one.

Here is the controller code :

 angular.module('pwilApp')
  .controller('SongsCtrl', function ($rootScope, $scope,$http,$sce) {
    var increment = 0;
    var laSimilaire = "";
    var init = true;

    $rootScope.activeHome = "";
    $rootScope.activeSongs = "active";
    $rootScope.activeAccount = "";
    $rootScope.activeContacts = "";
    $rootScope.activeAbout = "";
    $rootScope.activeConnection = "";
    $scope.currentPage = 1;
    $scope.totalPages = 0;
    $scope.loading = true;

    $scope.$on('$viewContentLoaded', function () {
      $http.get('https://api.spotify.com/v1/search?q=artist:Owl+City+title:On+The+Wing&type=track&limit=1').success(function (data) {
          console.log("Success");              
        })
        .error(function (error, status, headers, config) {
          console.log(status);
          console.log("Error occured");
        });

      $.getJSON('https://api.spotify.com/v1/search?q=artist:Owl+City+title:On+The+Wing&type=track&limit=1').then(function (data) {
        $scope.preview_url = $sce.trustAsResourceUrl(data.tracks.items[0].preview_url);
      });

    });

  }

Thank you for your answer.

can you post the controller code where you are doing the call? — rick
– rick, Commented Apr 29, 2016 at 9:34
Somewhere along the way your data is being malformed, try using a different browser / computer. The code itself seems fine — Michael Doye
– Michael Doye, Commented Apr 29, 2016 at 10:11

Mohsin Muzawar · Accepted Answer · 2016-04-29 10:04:10Z

1

Works Perfectly fine for me

 angular.module('pwilApp',[])
  .controller('SongsCtrl', function ($rootScope, $scope,$http) {
    var increment = 0;
    var laSimilaire = "";
    var init = true;

    $rootScope.activeHome = "";
    $rootScope.activeSongs = "active";
    $rootScope.activeAccount = "";
    $rootScope.activeContacts = "";
    $rootScope.activeAbout = "";
    $rootScope.activeConnection = "";
    $scope.currentPage = 1;
    $scope.totalPages = 0;
    $scope.loading = true;

      $http.get('https://api.spotify.com/v1/search?q=artist:Owl+City+title:On+The+Wing&type=track&limit=1').success(function (data) {
          console.log("Success",data);     
$scope.songData = data.tracks.items;         
        })
        .error(function (error, status, headers, config) {
          console.log(status);
          console.log("Error occured");
        });

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="pwilApp" ng-controller="SongsCtrl">

<div ng-repeat="song in songData">
 {{song.id}} | {{song.name}}
</div>

edited Apr 29, 2016 at 10:04

answered Apr 29, 2016 at 9:34

Mohsin Muzawar

1,2129 silver badges9 bronze badges

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

3 Comments

durks Over a year ago

Still 400 error, don't know why :/ May be a module version or else ?

Mohsin Muzawar Over a year ago

u can c that it is working in my snippet dont know wats wrong on ur side

durks Over a year ago

I tried on an other computer as you asked. It seems to work, but i now have a problem with CORS(Missing headers Access allow origin) Any guess?

Collectives™ on Stack Overflow

Error 400 when retrieving JSON with $http.get in AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related