CODEWITHSUNDEEP
javascriptarraysangularjs
erasmo carlos
erasmo carlos

Reputation: 682

angularjs + how to access elements in api response array to display as message in html

I hope I am phrasing my question correctly. Please let me know if otherwise.

I would like to ask for help regarding how to access the values in an array, that is an API response, so that this response can be displayed as a message to the user in the web page.

I send a list of users to the 3rd party API. This 3rd party API has a limit of 30 users per API call. Some of the files that my users upload contain more than 30 users, so I had to split the list of users into batches of 30 each, and put the API call within a loop to process 30 at a time. That part works well.

Each API call, returns a message when is successful, example:

{"id":"94395753143","updated_at":"2020-07-22T22:08:49Z"}
{"id":"94395753143","updated_at":"2020-07-22T22:08:50Z"}

I would like to access id, and updated_at values and displays them in the html with a more meaningful message, such as:

Panelists successfully added to Meeting ID: 94395753143 on 07/22/2020 at 5:08:49 PM
Panelists successfully added to Meeting ID: 94395753143 on 07/22/2020 at 5:08:50 PM

The angularJS controller that performs the API call (attention to line: $scope.msg = response.data;)

 $scope.AddPanelists = function () {
        $scope.arr = new Array;
        angular.forEach($scope.Panelists, function (item) {
            var b = {
                name: item.Name.trim(),
                email: item.Email.trim()
            };
            $scope.arr.push(b);
        });
        if ($scope.webinarId !== '') {
            if ($scope.arr.length > 0) {
                var data = JSON.stringify({ 'panelists': $scope.arr, 'webId': $scope.webinarId.split(' ').join('') });
                $http.post('/Meetings/Panelists/Home/CreatePanelists', data)
                    .then(function (response) {
                        if (response.status == 200) {
                            $scope.msg = response.data;   << attention this line (messages)
                        }
                    }, function (response) {
                        $scope.msg = "Service unavailable. Please try again.";
                        angular.element(document.getElementById("msg")).addClass('text-red');                       
                        return false;
                    });
            } else {
                alert('Please make sure to select a list of Panelists.');
                angular.element(document.getElementById("msg")).addClass('text-red');
                $scope.msg = 'Please make sure to select a list of Panelists';
                return false;
            }
        }
        else {
            alert('Please make sure to enter a Zoom Webinar ID');
            angular.element(document.getElementById("msg")).addClass('text-red');
            $scope.msg = 'Please make sure to enter a Zoom Webinar ID';
            return false;
        }
    };

Then in the HTML is do this:

<div id="msg" ng-repeat="msg in Messages">{{msg}}</div>

And I see this:

{"id":"94395753143","updated_at":"2020-07-22T22:08:49Z"}
{"id":"94395753143","updated_at":"2020-07-22T22:08:50Z"}

How can I changed the angularJS, or HTML so that the message gets displayed as I mentioned above, with more meaningful text?

Thank you for your help.

Erasmo

Upvotes: 0

Views: 181

Answers (1)

Jo&#227;o F&#233;
Jo&#227;o F&#233;

Reputation: 385

Assuming that Messages is the array of API return messages:

angular.module('app', []).controller(
  'Ctrl', function($scope) {
    $scope.Messages = [
      {id: 0, updated_at: "2020-07-22T22:08:49Z"},
      {id: 1, updated_at: "2020-08-22T22:08:49Z"},
      {id: 2, updated_at: "2020-09-22T22:08:49Z"}
    ];
  }
);
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  </head>
  <body ng-app="app" ng-controller="Ctrl">
    <div ng-repeat="msg in Messages">Panelists sucessfull added ID: {{msg.id}}. Day: {{msg.updated_at.substring(0,10)}}. Hour: {{msg.updated_at.substring(11,19)}}<div>
  </body>
</html>

Upvotes: 1

Related Questions