Site Search:

angularjs consume json



Today's welcome message is:

{{myWelcome}}


Today's welcome image is:
Smiley face

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

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

<br />
Today's welcome message is:<br />
<h1>
{{myWelcome}}</h1>
<br />
Today's welcome image is:<br />
<img alt="Smiley face" height="100%" src="{{myWelcome}}" />

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("http://api.oceandrivers.com/v1.0/getWebCams/")
    .then(function(response) {
        $scope.myWelcome = response.data[1].url;
    },
    function errorCallback(response) {
        $scope.myWelcome = response;
    // called asynchronously if an error occurs
    // or server returns response with an error status.
    });
});
</script>