CODEWITHSUNDEEP
javascriptangularjs
Sumanta736
Sumanta736

Reputation: 705

$http.get does not return anything

My factory method:

angular.module('ymusica').factory('Albums', ['$http', function($http) {
return {
    query: function(term) {
        return $http.get('/api/album', { params: { q: term } });
    }
 };
}]);

IT does not work, means it not return anything. If my api path is incorrect then how can i correct it. Here i use rx.js, rx.time.js, rx.coincidence and typeahead.js. Please help me to solve this issue. Thanks...

Console error: enter image description here

Here is my controller.js:

angular.module('ymusica').controller('AlbumSearch', ['$scope', 'Albums', 'Artists', '$q', function($scope, albums, artists, $q) {

$scope.albums = [];
$scope.artists = [];

var watchToObservable = function(scope, expression) {
    var observable = new Rx.Subject();

    scope.$watch(expression, observable.onNext.bind(observable));

    return observable;
}

var functionToObservable = function(scope, name) {

    var observable = new Rx.Subject();

    scope[name] = function(value) {
        observable.onNext(value);
    };

    return observable;
}

var terms = functionToObservable($scope, 'searchMusic');

terms.sample(250)
    .select(function(term) {
        var promise = $q.all([albums.query(term), artists.query(term)]);
        return Rx.promiseToObservable(promise)
    })
    .switchLatest()
    .select(function(promise) { return [promise[0].data.albums, promise[1].data.artists]; })
    .subscribe(function(result) {
        $scope.albums = result[0].slice(0, 5);
        $scope.artists = result[1].slice(0, 5);
        $scope.music = $scope.albums.concat($scope.artists);
    });

$scope.selectMusic = function(item) {
    console.log('music selected!', item);
    $scope.term = item.name;
};

$scope.imageSource = function(item) {
    return item.images['medium'];
};

$scope.hasAlbums = function() {
    return $scope.albums.length > 0;
};

$scope.hasArtists = function() {
    return $scope.artists.length > 0;
};

}]);

Upvotes: 0

Views: 264

Answers (4)

Yogesh
Yogesh

Reputation: 1585

You can not run an AngularJS application directly from file system, if it uses http service. that's why it is giving CORS error. since you are trying fire an http request from file protocol. To use a $http service you need a server. To test it locally you can install wamp/xampp server on your machine.

Upvotes: 1

Ravish
Ravish

Reputation: 2421

So there seems to be 2 issues, as see from the screenshot provided:

  • Cross-origin can not load file://
  • status 404

For first problem, there are a number of threads already dealing with Cross Origin Request or CORS as it is used in general terms. You can have a look at some of those threads, like:

So, basically this means it displaying the error because you are directly trying to run the file instead it should be something like: http://localhost:8080/index.html or something of that sort.

A simple fix would be: deploy it to your web server locally or remote. A bit more complex would be: * install http-server and * run the http server in your app directory

npm install -g http-server

once its installed, do :

cd <YOUR_APP_LOCATION>
http-server 
#OR
http-server -p 9090 -a 0.0.0.0 #this will start the webserver on port 9090

you can now open the url: http://localhost:8080/ OR http://127.0.0.1:9090/ and these CORS errors should be gone.

**Status 404 ** Problem It looks the path specified in factory is not correct:

return $http.get('/api/album', { params: { q: term } });

Can you check your path and correct that in your factory? This should the problem for you.

Upvotes: 0

Hassan Tariq
Hassan Tariq

Reputation: 740

It is showing cross region request error this error comes when your web application is in difference server and web api is on different api

Let say you web is hosted at : 192.168.0.1

and you are request api at 192.168.0.65

make sure both web and api on same server if not then cross region request is allowed

Upvotes: 0

Ahmad Sharif
Ahmad Sharif

Reputation: 4435

404, Status showing , that means client side error. Your API Path is not correct

Upvotes: 1

Related Questions