Launching the forEach function within an ng-repeat loop was it can be done by

Question

Launching the forEach function within an ng-repeat loop was it can be done by

I need to implement a function within the ng-repeat that will convert the value of Qprogress object in my JSON into a percentage. I already have the function written, but I am struggling with how to trigger it. I attempted to use a forEach loop inside the scope and then utilize the scope as the ng-model for the element I want to modify, but this approach is not yielding desired results. Below is the HTML structure:

<tr ng-repeat="item in clients" progressCalc>
    <td>
        <a href="#/details/{{clients.indexOf(item)}}" title="Link to {{item.FirstName}} {{item.LastName}}" class="oly-open">{{item.FirstName}} {{item.LastName}}</a>
    </td>
    <td ng-hide="item.Progress == 'In Progress'" ng-class="{ 'status-success': item.Progress == 'Questionnaire Completed', 'status-error': item.Progress == 'Unsent'}">
        {{item.Progress}}
    </td>
    <td ng-if="item.Progress == 'In Progress'" ng-model="progressCalc" class="status-info percent">
        {{item.Qprogress}}
    </td>
    <td width="10%">
        <a href="#/reports/" title{{$index + 1}}="Reports" ng-show="{{item.Progress == 'Questionnaire Completed'}}">
            <span class="stat-icon-report"></span>
        </a>
        <a href="#/sends/{{$index + 1}}" title="Alert" ng-show="{{item.Progress == 'Unsent'}}">
            <span class="stat-icon-bullhorn"></span>
        </a>
        <a href="#/progress/{{$index + 1}}" title="In Progress" ng-show="{{item.Progress == 'In Progress'}}">
            <span class="stat-icon-phone"></span>
        </a>
    </td>
</tr>

Additionally, here is the corresponding JavaScript code:

myApp.controller('clientStatus', ['$scope', '$http', function($scope, $http) {
    $http.get('assets/js/lib/angular/clientList.json').success(function(data) {
        $scope.clients = data;

        $scope.progressCalc = function() {
            angular.forEach(function(item) {
                var m = 0.26664;
                var s = 0.26664;
                var i = 0.694375;
                var t = item.Qprogress;
                t = t.replace(/m/g,'');
                t = t.replace(/s/g,'');
                t = t.replace(/i/g,'');
                var ta = t.split("/");
                var tTotal = (ta[0] * m) + (ta[1] * s) + (ta[2] * i);
                tTotal = Math.round(tTotal);
                $('.percent').append(tTotal + '%');
            });
        };
    });
}]);

Lastly, here's a snippet of the JSON data format:

"FirstName": "Bill",
"LastName": "Johnson",
"Company": "Texas Instruments",
"CompanyId": "2345672",
"ClientId": "EFTGE6",
"Title": "CIO",
"Phone": "555-555-5555",
"ClientSystemStatus": "Active",
"CreationDate": "06/03/2015, 10:35:59 am",
"Progress": "In Progress",
"Qprogress": "m125/s40/i0",
"Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1838b8e89928e8fa19588cf828e8c">[email protected]</a>"

Thank you!

javascript angularjs json

Answer 1

Answer №1

Uncertain of the specific calculation you require, but it seems that the forEach function may not be necessary. I made some adjustments and corrections which you can review below.

Controller:

$http.get('assets/js/lib/angular/clientList.json').success(function(data) {
    $scope.clients = data;
});

$scope.progressCalc = function(item) {
    var m = 0.26664;
    var s = 0.26664;
    var i = 0.694375;
    var t = item.Qprogress;
    t = t.replace(/m/g,'');
    t = t.replace(/s/g,'');
    t = t.replace(/i/g,'');
    var ta = t.split("/");
    var tTotal = (ta[0] * m) + (ta[1] * s) + (ta[2] * i);
    tTotal = Math.round(tTotal);
    return tTotal + '%';
};

HTML:

Note the first line where I removed an incorrect directive call for progressCalc. Furthermore, as an example, I demonstrate method calling by using progressCalc to display the result.

<tr ng-repeat="item in clients">
    <td>
        <a href="#/details/{{clients.indexOf(item)}}" title="Link to {{item.FirstName}} {{item.LastName}}" class="oly-open">{{item.FirstName}} {{item.LastName}}</a>
    </td>
    <td ng-hide="item.Progress == 'In Progress'" ng-class="{ 'status-success': item.Progress == 'Questionnaire Completed', 'status-error': item.Progress == 'Unsent'}">
        {{item.Progress}}
    </td>
    <td ng-if="item.Progress == 'In Progress'" class="status-info percent">
        {{item.Qprogress}} {{progressCalc(item)}}
    </td>
    <td width="10%">
        <a href="#/reports/" title{{$index + 1}}="Reports" ng-show="{{item.Progress == 'Questionnaire Completed'}}">
            <span class="stat-icon-report"></span>
        </a>
        <a href="#/sends/{{$index + 1}}" title="Alert" ng-show="{{item.Progress == 'Unsent'}}">
            <span class="stat-icon-bullhorn"></span>
        </a>
        <a href="#/progress/{{$index + 1}}" title="In Progress" ng-show="{{item.Progress == 'In Progress'}}">
            <span class="stat-icon-phone"></span>
        </a>
    </td>
</tr>

I have not tested this solution, but it should work or provide some guidance!

Answer 2

Uncertain of the specific calculation you require, but it seems that the forEach function may not be necessary. I made some adjustments and corrections which you can review below.

Controller:

$http.get('assets/js/lib/angular/clientList.json').success(function(data) {
    $scope.clients = data;
});

$scope.progressCalc = function(item) {
    var m = 0.26664;
    var s = 0.26664;
    var i = 0.694375;
    var t = item.Qprogress;
    t = t.replace(/m/g,'');
    t = t.replace(/s/g,'');
    t = t.replace(/i/g,'');
    var ta = t.split("/");
    var tTotal = (ta[0] * m) + (ta[1] * s) + (ta[2] * i);
    tTotal = Math.round(tTotal);
    return tTotal + '%';
};

HTML:

Note the first line where I removed an incorrect directive call for progressCalc. Furthermore, as an example, I demonstrate method calling by using progressCalc to display the result.

<tr ng-repeat="item in clients">
    <td>
        <a href="#/details/{{clients.indexOf(item)}}" title="Link to {{item.FirstName}} {{item.LastName}}" class="oly-open">{{item.FirstName}} {{item.LastName}}</a>
    </td>
    <td ng-hide="item.Progress == 'In Progress'" ng-class="{ 'status-success': item.Progress == 'Questionnaire Completed', 'status-error': item.Progress == 'Unsent'}">
        {{item.Progress}}
    </td>
    <td ng-if="item.Progress == 'In Progress'" class="status-info percent">
        {{item.Qprogress}} {{progressCalc(item)}}
    </td>
    <td width="10%">
        <a href="#/reports/" title{{$index + 1}}="Reports" ng-show="{{item.Progress == 'Questionnaire Completed'}}">
            <span class="stat-icon-report"></span>
        </a>
        <a href="#/sends/{{$index + 1}}" title="Alert" ng-show="{{item.Progress == 'Unsent'}}">
            <span class="stat-icon-bullhorn"></span>
        </a>
        <a href="#/progress/{{$index + 1}}" title="In Progress" ng-show="{{item.Progress == 'In Progress'}}">
            <span class="stat-icon-phone"></span>
        </a>
    </td>
</tr>

I have not tested this solution, but it should work or provide some guidance!

Answer 3

Answer №2

When approaching this scenario, especially if the calculation is only required once per item, my suggestion would be to execute the method from your controller as a callback function.

$http.get('assets/js/lib/angular/clientList.json').success(function (data) {
    $scope.clients = data;
    $scope.clients.forEach(function(client) {
         //perform your calculations here.
    });
});

If executing the code directly from the html is necessary, then I recommend referring to the solution suggested by @manzapanza.

Answer 4

When approaching this scenario, especially if the calculation is only required once per item, my suggestion would be to execute the method from your controller as a callback function.

$http.get('assets/js/lib/angular/clientList.json').success(function (data) {
    $scope.clients = data;
    $scope.clients.forEach(function(client) {
         //perform your calculations here.
    });
});

If executing the code directly from the html is necessary, then I recommend referring to the solution suggested by @manzapanza.

Launching the forEach function within an ng-repeat loop was it can be done by

Answer №1

Answer №2

Similar questions

Trigger specific scripts again after loading jQuery AJAX

Enumerating items in a JSON dataset

What is the method for utilizing a filter to extract the specific value from the elements within an array of double objects?

Issue with IE due to jQuery/JavaScript conflict

Creating a HTML5 canvas animation of an emoticon winking to add a fun touch to your

Send a POST request with an NSDictionary set in the HTTPBody

The amalgamation of geometries using BufferGeometryUtils results in variations from the original model

Top solution for maintaining smooth navigation across web pages

Steps to retrieve an array from AJAX request and save it to a JavaScript variable

How can I retrieve the URL of the previous page from the history object in all browsers?

Troubleshooting jQuery Dropdown Menu Animation Bugs

Encountering a connection error when trying to access a Google spreadsheet within a Next.js application

Troubleshooting a glitch with passing a variable to a PHP script using AJAX

Tips for effectively implementing a curried selector function with the useSelector hook in react-redux

Exploring the Battle between LocalStorage and Redis for Front-end and NodeJS Development

An Effective Solution for Resolving the 'Use JsonReader.setLenient(true) to Accept Invalid JSON at Line 1 Column 1 Path $' Issue in Android Studio

When the button is clicked, request the total count of elements in the array

Error: Uncaught TypeError - Unable to assign a value to the 'status' property

Node.js server continues running after attempting to stop with ctrl + C following starting the server using the command "npm start"

How can I utilize React to pull information from the Google Taxonomy API?