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 informations with Ajax queries.

To make it short, I have three levels of datas

-- 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 shoudl 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 alot 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 wich element to work and get the angular callback working?

Answer 1

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.

Answer 2

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

      });
 }