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

Question

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

you need to add scope of data you want to show in the controller, and put this expression {{ your_scope_name }} in your HTML. For more information, you can read more here. For example (controller): $scope.result = response.data; (HTML): {{result.value}} — muzazu
– muzazu, Commented Jan 23, 2021 at 16:27

caio · Accepted Answer · 2021-01-23 23:23:55Z

1

What you're doing is not working because you're overwriting your entire $scope variable with a string. What you have to do is to add the string as a variable inside your $scope:

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.joke = response.data.value;
                    console.log($scope.joke)
                }, function myError(response) {
                    console.log("erreur : ", response.data.errors);
                });
        }}
    getJoke();
})

Now you can use {{ }} to access the variables that are inside the scope of your current controller.

<!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>
        <p>{{ mainCtrl.joke }}</p> <!-- you can either write mainCtrl.joke or simply joke -->
    </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>

See in Plunker.

edited Jan 23, 2021 at 23:23

answered Jan 23, 2021 at 16:18

caio

1141 silver badge10 bronze badges

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

3 Comments

baptiste Over a year ago

Unfortunatly it doesn't work : / if you got any idea i take it

caio Over a year ago

Sorry about that. I haven't tested when posting. I edited my answer and I believe it will be okay now. Tested using plunker

baptiste Over a year ago

Perfect ! i understand now . thanks a lot

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related