Reading JSON from a URL in AngularJS using $http.get

wg4568 Published at Dev

wg4568

I've written a Flask back-end for an application I'm developing. In short, when calling http://localhost:5000/allsongs/ it returns something like (or very similar to) the following:

[["King And Lionheart", "Of Monsters And Men", "My Head Is An Animal", "mp3"], ["Just One Yesterday", "Fall Out Boy", "Save Rock And Roll", "mp3"], ["Laughter Lines", "Bastille", "All This Bad Blood", "mp3"]]

I'm trying to write a web-app using AngularJS that reads the data from that URL and uses ng-repeat to make a list that I can search through. So far, I have written this:

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

<html ng-app="myApp">

<body>

<script>
    angular.module('myApp', [])
        .controller('Songs', function Songs($scope, $http) {
    $http.get('http://localhost:5000/allmusic').then(function(response) {
      $scope.songs = response;
    });
  }
    );
</script>

<input placeholder="Search..." type="text" ng-model="search" />


<div ng-controller="Songs">
<p>{{songs}}</p>
</div>
<p ng-repeat="song in songs | filter:search | orderBy:name">{{ song }}</p>
</body>
</html>

All that shows up when I load the page is the search field at the top of the page.

Also, when I refresh the page I see my Flask server being called, so I know the $http.get is working somewhat.

Any advice would be great!

Egor Malkevich

It may be an CORS issue when you render HTML not at server side. So you have two options.

Add some router that return index.html with all Angular code you need.
Add some header response changes.

Sadly I have no experience with Flask, but at Node.js the second solution may looks like that

app.use((req,res)=>{
    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);
    req.next();
  });

Collected from the Internet

Please contact [email protected] to delete if infringement.