I have a web app I'm experimenting with to learn angularjs. The app allows the user to submit a web form with a bible book, chapter, and starting verse and ending verse and retrieve the verses from a jsonp API source from labs.bible.org.
Here is my controller:
bibleMemorizerApp.controller('LookupCtrl', function($scope, $http) {
$scope.lookup = function() {
$scope.scriptures = [];
var book = $scope.passage.book;
var chapter = $scope.passage.chapter;
var verse_start = $scope.passage.verse_start;
var verse_end = $scope.passage.verse_end;
var source_url = 'http://labs.bible.org/api/?passage=' + book + '%20' + chapter + ':' + verse_start + '-' + verse_end + '&type=json&callback=JSON_CALLBACK'
$http({
method: 'JSONP',
url: source_url
}).success(function ( data, status, headers, config) {
$scope.scriptures = data;
console.log("Success! status:" + status);
console.log($scope.scriptures);
}).error(function ( data, status, headers, config) {
console.log("The JSONP request failed with status code:" + status );
});
};
Here is my web page:
<div ng-controller="LookupCtrl">
<form name="lookupForm" novalidate class="lookupForm" ng-controller="LookupCtrl">
<label>Book</label> : <input type="text" name="book" ng-model="passage.book" required><br/>
<label>Chapter</label> : <input type="text" name="chapter" ng-model="passage.chapter" required><br/>
<label>Starting Verse</label> : <input type="text" name="verse_start" ng-model="passage.verse_start" required><br/>
<label>Starting End</label> : <input type="text" name="verse_end" ng-model="passage.verse_end" required><br/>
<button ng-click="lookup()">Search</button>
</form>
<ul>
<li ng-repeat="scripture in scriptures">{{scripture.text}}</li>
</ul>
The API seems to be successfully returning the jsonp request. Example:
angular.callbacks._0([{"bookname":"John","chapter":"3","verse":"2","text":"came to Jesus at night and said to him, \u201cRabbi, we know that you are a teacher who has come from God. For no one could perform the miraculous signs that you do unless God is with him.\u201d"},{"bookname":"John","chapter":"3","verse":"3","text":"Jesus replied, \u201cI tell you the solemn truth, unless a person is born from above, he cannot see the kingdom of God.\u201d"},{"bookname":"John","chapter":"3","verse":"4","text":"Nicodemus said to him, \u201cHow can a man be born when he is old? He cannot enter his mother\u2019s womb and be born a second time, can he?\u201d <a style=\"\" target=\"_blank\" href=\"http:\/\/bible.org\/page.php?page_id=3537\">©NET<\/a>"}])
However, I seem to not be able to get the scriptures.text variable to populate the text on the page in the {{scripture.text}}
Any ideas?