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="[email protected]" 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
– Sahan Serasinghe, Commented Jun 21, 2017 at 1:33

Sahan Serasinghe · Accepted Answer · 2017-06-21 01:53:17Z

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, 2017 at 1:53

Sahan Serasinghe

1,67121 silver badges33 bronze badges

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

4 Comments

Anurag Over a year ago

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?

Sahan Serasinghe Over a year ago

On what technology have you written your server application?

Anurag Over a year ago

The server application is written on nodejs. Mongodb is used as database and and Expressjs is used as web framework.

Sahan Serasinghe Over a year ago

Check this link to configure CORS with ExpressJS: github.com/expressjs/cors A more specific question related to Heroku and NodeJS+Express: stackoverflow.com/questions/11001817/…

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related