Ajax request with callback into ng-repeat element Angular.js

Question

I am currently learning to code with Angular.js and I am doing a project where I load information with Ajax queries.

To make it short, I have three levels of data

-- Skills (competences)

--- Indicators (indicateurs)

---- Results (resultats)

I have a first request that tracks Skills and Indicator for the current skill.

HTML

<div ng-controller="AdminController" data-ng-init="listAllCompetences()">

    <!-- Level 1 -->
    <div data-ng-repeat="competence in competences" class="content level1 topcompetence" id="competence_{{competence.Competence.id}}">
        
        <div class="level1_title_box">
            <h3 class="h3 titre_competence" ng-hide="editorEnabled">{{$index + 1}} - {{competence.Competence.description}} </h3>
        </div>

        <p><b>Indicateurs de performances : </b></p>

        <!-- Level 2 -->
        <div data-ng-repeat="indicateur in competence.Indicateur" class="content level2" id="indicateur_{{indicateur.id}}">
            
            <div class="level2_title_box">
                <h4>{{$index + 1}} - {{indicateur.description}}</h4>
            </div>
            
            <p><b>Results : </b></p>

            <p><a ng-click="listAllRestulatsByIndicateurId(indicateur.id)" href="javascript:void(0);">Click here to show results</a></p>

            <!-- Level 3 -->
            Level 3 should be displayed there...
            <!-- End Level 3 -->

            <pre>{{resultatsAttendusCallback}} {{resultatsAttendusCallback.length}}</pre>

        </div>
        <!-- End Level 2 -->
    </div>
    <!-- End Level 1-->
</div>

When I click on listAllRestulatsByIndicateurId(indicateur.id); function, there is an Ajax request that get all the results for the given indicator.

The point where I have not figured it out yet is how am I supposed to know where to output this since I can have a lot of Indicators.

My Angular function

$scope.listAllRestulatsByIndicateurId = function(indicateurID) {

          console.log(indicateurID);

          var req_resultats_by_indicateur = {
               method: 'POST',
               url: '../api/resultatAttendus/listByIndicateur',
               headers: {'Content-Type': 'application/x-www-form-urlencoded'},
               data: {
                    indicateur_id: indicateurID
               }
          }

          console.log(req_resultats_by_indicateur);

          $http(req_resultats_by_indicateur).then(function successCallback(callback) { 

               if(callback.data.status == 'success') {

                    $scope.resultatsAttendusCallback = callback.data.data;
                    console.log(callback);
               }

               if(callback.data.status == 'error') {
                    console.log(callback)
               }

          });
     }

Note: The use of callback, may be bad as I named it. It is the returned array from my ajax call.

This line $scope.resultatsAttendusCallback = callback.data.data; give me the array of results with the indicator ID as parent.

But when I execute this function, all my {{resultatsAttendusCallback}} or Results spaces are writing the array. I just want to get the result to be printed in the indicator ID I clicked.

Is there any way to attribute any sort of ID or Class name to those element so I could know on which element to work and get the angular callback working?

very confusing calling a promise object callback. Bad name choice. What exactly are you wanting to do with resultatsAttendusCallback ? In javascript callback is a use case term for a function — charlietfl
– charlietfl, Commented Jan 19, 2016 at 18:40

Alon Eitan · Accepted Answer · 2016-01-19 18:42:55Z

You can pass the current indicateur to the function (The object itself, not its ID) and attach the data directly to that object, then in the view, you'll need to display the returned data that was attached to the object by the ajax request:

<!-- Level 1 -->
<div data-ng-repeat="competence in competences" class="content level1 topcompetence" id="competence_{{competence.Competence.id}}">

    <div class="level1_title_box">
        <h3 class="h3 titre_competence" ng-hide="editorEnabled">{{$index + 1}} - {{competence.Competence.description}} </h3>
    </div>

    <p><b>Indicateurs de performances : </b></p>

    <!-- Level 2 -->
    <div data-ng-repeat="indicateur in competence.Indicateur" class="content level2" id="indicateur_{{indicateur.id}}">

        <div class="level2_title_box">
            <h4>{{$index + 1}} - {{indicateur.description}}</h4>
        </div>

        <p><b>Results : </b></p>

        <p><a ng-click="listAllRestulatsByIndicateurId(indicateur)" href="javascript:void(0);">Click here to show results</a></p>

        <!-- Level 3 -->
        Level 3 shoudl be displayed there...
        <!-- End Level 3 -->

        <pre ng-if="indicateur.resultatsAttendusCallback">{{indicateur.resultatsAttendusCallback}} {{indicateur.resultatsAttendusCallback.length}}</pre>

    </div>
    <!-- End Level 2 -->
</div>
<!-- End Level 1-->

JS:

$scope.listAllRestulatsByIndicateurId = function(indicateur) {

      console.log(indicateur.id);

      var req_resultats_by_indicateur = {
           method: 'POST',
           url: '../api/resultatAttendus/listByIndicateur',
           headers: {'Content-Type': 'application/x-www-form-urlencoded'},
           data: {
                indicateur_id: indicateur.id
           }
      }

      console.log(req_resultats_by_indicateur);

      $http(req_resultats_by_indicateur).then(function successCallback(callback) { 

           if(callback.data.status == 'success') {

                indicateur.resultatsAttendusCallback = callback.data.data;
                console.log(callback);
           }

           if(callback.data.status == 'error') {
                console.log(callback)
           }

      });
 }

Well those explinations where really good. It actually worked. I did not know it was possible to just attach the function to the object. Thank you !

MichaelWClark · Accepted Answer · 2016-01-19 18:45:35Z

0

I'm not following your question 100% but I think I know what you are tyring to do. Your callback.data.data is coming back as a JSON string, but you want just a subset of it.

Here is what I do

    $scope.resultatsAttendusCallback = MyModel.build(callback.data.data);
    ...........

    angular.module('lodgicalWebApp')
    .factory('MyModel',['Column',function(Column){
        function MyModel(title, columns){
            this.title = title;
            this.columns = Column.build(columns); //Column is another Model
        }


         MyModel.build = function(data){
            // //console.log("building variables: " + data);
            var models= [];
            angular.forEach(data, function(v,k){
                models.push(new MyModel(v.name, v.cols));
            })
            return models;
        }

        return MyModel;
})

This allows me to return complex JSON and map it to a real object in my code. You don't have to do the forEach in the build either, I do this when my JSON returns a list of MyModels rather than a single one. From there you can add your own ID, attributes, do any data transforms etc.

answered Jan 19, 2016 at 18:45

MichaelWClark

3901 silver badge13 bronze badges

1 Comment

Patrice Poliquin Over a year ago

Thank you for sharing this snippet, but I am not that good in Angular to be able to understand it or insert it in my actual code. I still keep this post in favs so I will be able to get back to this post when I'll be better in Angular!

Collectives™ on Stack Overflow

Ajax request with callback into ng-repeat element Angular.js

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related