I am facing difficulty in accessing information from my API through Angular

Question

I am facing difficulty in accessing information from my API through Angular

I recently developed an API using NodeJS. While attempting to fetch data from the API using AngularJS, I encountered an issue where no data is being displayed.

Take a look at my API, which contains data in JSON format. You can access the live link to my API

{"status":"success","data":[{"_id":"58175cb6f0c48b2b9821d799","listen_url":"https://www.youtube.com/watch?v=XSbZidsgMfw","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Yonkers_tyler_cover.jpg/220px-Yonkers_tyler_cover.jpg","producers":"Tyler, The Creator","label":"XL Recordings","artist":"Tyler, The Creator","song_title":"Yonkers ","__v":0},{"_id":"581760e7aa7eb70a8cf0d770","listen_url":"https://vimeo.com/179791907","image_url":"https://upload.wikimedia.org/wikipedia/en/2/2a/Frank_Ocean_Blonde_2.jpg","producers":"Frank Ocean & Om'Mas Keith","label":"Boys Don't Cry","artist":"Frank Ocean","song_title":"Nikes","__v":0},{"_id":"582199b38e7a590871b38893","listen_url":"https://www.youtube.com/watch?v=x4pon-hdEXU","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/f/fa/Domo_Genesis-The_Alchemist-No_Idols.jpg/220px-Domo_Genesis-The_Alchemist-No_Idols.jpg","producers":"Alchemist","label":"Self Released","artist":"Domo Genesis","song_title":"Elimination Chamber  (featuring Earl Sweatshirt, Vince Staples & Action Bronson)","__v":0},{"_id":"58219ae58e7a590871b38894","listen_url":"https://soundcloud.com/defjam/frank-ocean-super-rich-kids","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/f/f5/Super_Rich_Kids.jpg/220px-Super_Rich_Kids.jpg","producers":"Malay","label":"Def Jam","artist":"Frank Ocean","song_title":"Super Rich Kids (featuring Earl Sweatshirt)","__v":0},{"_id":"58219c0a8e7a590871b38895","listen_url":"https://www.youtube.com/watch?v=0FcDXL5Aw0o","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Hive-earlsweat.jpg/220px-Hive-earlsweat.jpg","producers":"randomblackdude and Matt Martians","label":"Tan Cressida","artist":"Earl Sweatshirt","song_title":"Hive ( featuring Casey Veggies and Vince Staples)","__v":0},{"_id":"58219f3f8e7a590871b38896","listen_url":"https://vimeo.com/31781199","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/2/2e/Frank-Ocean-Thinkin-Bout-You-2012.png/220px-Frank-Ocean-Thinkin-Bout-You-2012.png","producers":"Shea Taylor","label":"Def Jam","artist":"Frank Ocean","song_title":"Thinkin Bout You","__v":0},{"_id":"5821a3e88e7a590871b38897","listen_url":"https://vimeo.com/49091270","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/7/71/Frankoceanpyramids.jpg/220px-Frankoceanpyramids.jpg","producers":"Frank Ocean, Malay and Om'Mas Keith","label":"Def Jam","artist":"Frank Ocean","song_title":"Pyramids","__v":0},{"_id":"582b4010b5a2eb460b850a2c","listen_url":"https://www.youtube.com/watch?v=FCbWLSZrZfw","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/8/81/Chum_Earl_Sweatshirt.jpg/220px-Chum_Earl_Sweatshirt.jpg","producers":"randomblackdude, Christian Rich & Hugo (Outro)","label":"Tan Cressida","artist":"Earl Sweatshirt","song_title":"Chum","__v":0}]}

Here is my AngularJS code. I am attempting to set up a loop to display all the artists' names along with their song titles:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>


<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
  <li ng-repeat="x in myData">
    {{ x.artist + ', ' + x.song_title}}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("https://forgetthis-jafar70.c9users.io").then(function (response) {
      $scope.myData = response.data.data;
  });
});
</script>

</body>
</html>

I am currently facing an issue and unable to troubleshoot what might be going wrong. Please advise.

javascript angularjs json

Answer 1

Answer №1

Below your module declaration, make sure to include the following code:

app.config(['$sceDelegateProvider', function($sceDelegateProvider) {
         $sceDelegateProvider.resourceUrlWhitelist(['self', 'https://mysite-jafar70.c9users.io/**']);

}]);

Answer 2

Below your module declaration, make sure to include the following code:

app.config(['$sceDelegateProvider', function($sceDelegateProvider) {
         $sceDelegateProvider.resourceUrlWhitelist(['self', 'https://mysite-jafar70.c9users.io/**']);

}]);

Answer 3

Answer №2

Special shoutout to @Claies for helping me out with enabling CORS. I ended up incorporating these specific lines of code into my index.js file (nodejs).

server.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*')
    res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE')
    res.header('Access-Control-Allow-Headers','Content-Type')
    next()
})

Answer 4

Special shoutout to @Claies for helping me out with enabling CORS. I ended up incorporating these specific lines of code into my index.js file (nodejs).

server.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*')
    res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE')
    res.header('Access-Control-Allow-Headers','Content-Type')
    next()
})

Answer 5

Answer №3

Initially, I encountered an error when attempting to access the API.

503 (Service Unavailable)

As a solution, I hardcoded the response in the controller :

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
  $scope.myData = [  
      {  
         "_id":"58175cb6f0c48b2b9821d799",
         "listen_url":"https://www.youtube.com/watch?v=XSbZidsgMfw",
         "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Yonkers_tyler_cover.jpg/220px-  Yonkers_tyler_cover.jpg",
         "producers":"Tyler, The Creator",
         "label":"XL Recordings",
         "artist":"Tyler, The Creator",
         "song_title":"Yonkers ",
         "__v":0
      },
      {  
         "_id":"581760e7aa7eb70a8cf0d770",
         "listen_url":"https://vimeo.com/179791907",
         "image_url":"https://upload.wikimedia.org/wikipedia/en/2/2a/Frank_Ocean_Blonde_2.jpg",
         "producers":"Frank Ocean & Om'Mas Keith",
         "label":"Boys Don't Cry",
         "artist":"Frank Ocean",
         "song_title":"Nikes",
         "__v":0
      }, ...
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
  <li ng-repeat="x in myData">
    {{ x.artist + ', ' + x.song_title}}
  </li>
</ul>
</div>

Answer 6

Initially, I encountered an error when attempting to access the API.

503 (Service Unavailable)

As a solution, I hardcoded the response in the controller :

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
  $scope.myData = [  
      {  
         "_id":"58175cb6f0c48b2b9821d799",
         "listen_url":"https://www.youtube.com/watch?v=XSbZidsgMfw",
         "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Yonkers_tyler_cover.jpg/220px-  Yonkers_tyler_cover.jpg",
         "producers":"Tyler, The Creator",
         "label":"XL Recordings",
         "artist":"Tyler, The Creator",
         "song_title":"Yonkers ",
         "__v":0
      },
      {  
         "_id":"581760e7aa7eb70a8cf0d770",
         "listen_url":"https://vimeo.com/179791907",
         "image_url":"https://upload.wikimedia.org/wikipedia/en/2/2a/Frank_Ocean_Blonde_2.jpg",
         "producers":"Frank Ocean & Om'Mas Keith",
         "label":"Boys Don't Cry",
         "artist":"Frank Ocean",
         "song_title":"Nikes",
         "__v":0
      }, ...
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
  <li ng-repeat="x in myData">
    {{ x.artist + ', ' + x.song_title}}
  </li>
</ul>
</div>

I am facing difficulty in accessing information from my API through Angular

Answer №1

Answer №2

Answer №3

Similar questions

Retention of user-entered data when navigating away from a page in Angular

Struggling to connect to Node/Express Backend

What methods can I use to retrieve traversed objects using riak-js?

Searching for a specific collection item based on a custom property (excluding _id) in Meteor - what's the best approach?

Utilizing JavascriptExecutor in Powershell

Navigating through AngularJS routes with a Resolver

The third-party API is unable to access a class within a multi-module Maven project

Rotating an object in Three.js: Animate back and forth along two different azimuth angles

There was an issue parsing the data due to org.json.JSONException: The value 403, which is of type java.lang.Integer, cannot

How can I generate spheres in threejs with varying radii while all passing through the shared point located at coordinates (0,0,200)?

Difficulty dealing with Firestore using get() followed by add()

Looking to transfer JSON data between JavaScript and Java code

A guide to implementing daily function calls for a week utilizing the @nestjs/scheduler module

Can somebody please tell me the equivalent of the sleep() function in JavaScript?

When the page is reloaded, the computed property in Vue.js (vuex) returns undefined due to the hardcoded array of objects data stored in vuex

The trustAsResourceUrl method is not defined and cannot be called in this context

Utilizing onClick with material-ui button - functioning flawlessly for a single interaction

Is PHP-generated HTML not responding to external Javascript?

Exploring the power of Vue element manipulation

Using jQuery and Bootstrap in an ASP.NET Core project