AngularJS,how to get data from an API and display it

Question

Im trying to learn angularJS. I'm trying to fetch the data from an API that gives artists' data in JSON format. What I'm trying to do is to fetch the name entered in the textbar and then just show the information received as JSON. The format that the API accepts is url/artistname + app id as request, where artistname is the input. The people who's API im trying to use have given me a valid app code, which is stored in the var id. I've written the following code so far, any help would be appreciated. Thanks!

    var myApp = angular.module('myApp', []);
    myApp.controller('UserCtrl', function($scope,$http){
        $scope.user = null;
        var id = "my secret id comes here";

        var name = $scope.searchText;
        $scope.getByID = function() {

            $http.get("https://rest.bandsintown.com/artists/" + name + id)
                    $scope.user = response;
                    console.log(response)
                }

              });

Next, the html code is:

<body ng-app="myApp">
    <div ng-controller="UserCtrl">
        Search : <input type="text" placeholder="Search Employees" ng-model="searchText"/> <br/><br/>
        <button ng-click="UserCtrl.getByID()">Submit</button>
</body>

Thank you and sorry if this is a newbie question, I am indeed a newbie!

Phix · Accepted Answer · 2020-03-17 20:32:55Z

response isn't being declared anywhere, so it looks like you just need to handle the $http.get response correctly. The following should work:

 var myApp = angular.module('myApp', []);
 myApp.controller('UserCtrl', function($scope, $http) {
   $scope.user = null;

   var id = "my secret id comes here";
   var name = $scope.searchText;

   $scope.getByID = function() {
     // $http.get returns a promise, you'll need to set the variables there.
     $http.get("https://rest.bandsintown.com/artists/" + name + id)
       .then(response => {
         $scope.user = response;
         console.log(response)
       })
   }
 });

Collectives™ on Stack Overflow

AngularJS,how to get data from an API and display it

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related