How to display my request response.value in HTML with angularJS

Don’t be rude i’m new with angularJS

I write a get function who request an API that give me some Chuck Norris Fact .

My question is simple : How to display the response in my HTML when i click on my button .

Actually when i click on my button i get my chuckNorrisFact sentence in my console .

Thanks a lot

here is my html

<!DOCTYPE html>
<html lang="FR">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Random Chuck Norris jokes</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>



<body ng-app="mainApp">

    <div ng-controller="mainCtrl">
        <button ng-click="generateRandomJoke()"> have fun</button>
        </div>
        <p></p>
    </div>

</body>

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

</html>

And here is my controllers.js :

var app = angular.module('mainApp', []);

app.controller('mainCtrl', function ($scope, $http) {
    function getJoke() {
        $scope.generateRandomJoke = function () {
            $http({
                method: "GET",
                url: "https://api.chucknorris.io/jokes/random",
            })
                .then(function mySuccess(response) {
                    $scope = response.data;
                    console.log($scope.value)
                }, function myError(response) {
                    console.log("erreur : ", response.data.errors);
                });
        }}
    getJoke();
})




71 thoughts on “How to display my request response.value in HTML with angularJS”

Leave a Comment