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

Question

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!

Oops, copied and pasted the ng-repeat wrong, it actually reads:<div ng-controller="Songs"><p ng-repeat="song in songs | filter:search | orderBy:name">{{ song }}</p></div> — wg4568
– wg4568, Commented Dec 23, 2015 at 17:26
Have you done a console.log on the $http.get response inside the then function to verify you are getting the data you expect? — Daniel Nalbach
– Daniel Nalbach, Commented Dec 23, 2015 at 17:33
@Ludo - you do not need to parse the response if it is already in json format from the server. It will be directly usable and assignable in Angular. — Daniel Nalbach
– Daniel Nalbach, Commented Dec 23, 2015 at 17:34
@DanielNalbach - I added a console.log for the response, but I found this: XMLHttpRequest cannot load http://localhost:5000/allmusic. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access., which on the removal of the console.log was still there. Simply put, the log didn't do anything, but that error was there. — wg4568
– wg4568, Commented Dec 23, 2015 at 22:50

Egor Malkevich · Accepted Answer · 2015-12-24 12:07:18Z

3

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();
  });

answered Dec 24, 2015 at 12:07

Egor Malkevich

1,5461 gold badge11 silver badges26 bronze badges

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

1 Comment

wg4568 Over a year ago

Finally! I fixed it! You were right, it was a CORS issue. I mucked around with the JavaScript for a bit but to no avail. Instead I used something I found called flask-cors. It basically adds the right headers for you.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related