How to get data from rest api which has basic authentication?

Question

I'm trying to get data from this website through HTTP get method. This website has basic authentication. The data is in JSON format. This is the rest api website: (https://shoploapi.herokuapp.com/sellers)

// Code goes here
angular.module('myapp', ['myapp.controller']);

angular.module('myapp.controller', ['myapp.service'])
  .controller('testController', function($scope, testService) {

    $scope.posts = {};

    function GetAllPosts() {
      var getPostsData = testService.getPosts();

      getPostsData.then(function(post) {
        $scope.posts = post.data;

      }, function() {
        alert('Error in getting post records');
      });
    }

    GetAllPosts();
  });

angular.module('myapp.service', [])
  .service('testService', function($http) {

    //get All NewsLetter
    this.getPosts = function() {
      return $http.get('https://shoploapi.herokuapp.com/sellers');
    };
  });
angular.module('myApp', ['base64'])
  .config(function($httpProvider, $base64) {
    var auth = $base64.encode("bhupendra7:ice123age456");
    $httpProvider.defaults.headers.common['Authorization'] = 'Basic ' + auth;
  });

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-base64/2.0.5/angular-base64.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body ng-app="myapp">
  <h1>Hello Plunker!</h1>
  <div ng-controller="testController">
    <div>
      <ul>
        <li ng-repeat="post in posts">
          {{post.careof}} {{post.district}} {{post.gender}} {{post.name}}
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

Here's the link to my Plunker:

(https://plnkr.co/edit/7pqljm?p=preview)

Can anyone help?

You have a typo in `angular.module('myApp', ['base64'])` make `myApp` to `myapp` .. Even if that's corrected you will face another problem, testController being `undefined`. Let me know if you need more help — Sahan Serasinghe, Jun 21 '17 at 01:33

score 1 · Accepted Answer · answered Jun 21 '17 at 01:53

1

There are 2 problems in your code.

1. You have a typo

In angular.module('myApp', ['base64']), change to module name to myapp

2. The way you have injected your myapp.controller to myapp module

Change it to angular.module('myapp', []); You will also need to reorder your code. Check out the Plunker I have created for you.

Even if you fix the above two problems, you will still face a CORS problem from Heroku. Depending on your server-side technology (NodeJS, Rails etc.), you will need to enable it from the server to be able to communicate with your app. You can also look in to JSONP with AngularJS

Hope this helps

answered Jun 21 '17 at 01:53

Sahan Serasinghe

1,591
20
33

Thnak you sir. Can you please help me. I've been trying it for a long time. What will I have to do inorder to get the data? – Anurag Jun 21 '17 at 07:39
On what technology have you written your server application? – Sahan Serasinghe Jun 21 '17 at 08:47
The server application is written on nodejs. Mongodb is used as database and and Expressjs is used as web framework. – Anurag Jun 21 '17 at 17:15
Check this link to configure CORS with ExpressJS: https://github.com/expressjs/cors A more specific question related to Heroku and NodeJS+Express: https://stackoverflow.com/questions/11001817/allow-cors-rest-request-to-a-express-node-js-application-on-heroku – Sahan Serasinghe Jun 21 '17 at 23:12

How to get data from rest api which has basic authentication?

1 Answers1