Search code examples
jsonangularjsasp.net-mvcc#-4.0angularjs-ng-repeat

How to list values using ng-repeat using AngularJS and JsonResult ASP.NET MVC


I'm trying to render a list from my JsonResult Controller. It's ok, I receive data in my Angular service, but a in trouble to render it in a list using ng-repeat. It´s renders a big empty list. When the data is not a list, it´s works.

Angular. Debug

var app = angular.module('FileApp', []);        
app.service('ngFileService', function ($http) {        
  this.getFileByFileCode = function (fileCodigo) {
    var response = $http.get("/Files/GetFile?fileCodigo=" + fileCodigo);
    return response;
  };

});

app.controller('ngFileController', function ($scope, ngFileService) {                
  $scope.filterFileCode = "";

  $scope.getFilteredFile = function () {
    var promise = ngFileService.getFileByFileCode($scope.filterFileCode);
    promise.then(function (resp) {
      $scope.File = resp.data;       
      $scope.Message = "Call is Completed Successfully";
    }, function (err) {
      $scope.Message = "Call Failed " + err.status;
    });
  };
});

HTML

        <tr>
          <td>Enter Search Value:</td>
          <td><input type="text" ng-model="filterFileCode" class="form- 
         control" ng-change="getFilteredFile()" /></td>
        </tr>
      <table class="table table-bordered table-condensed table-striped">
        <thead>
          <tr>
            <th>Documentos Gerais File</th>
            <th></th>
            <th>CTB</th>
            <th>COM</th>
            <th>Site</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="f in File">
            <td>Documentos</td>
            <td>{{f.FileCTB}}</td>
            <td>{{f.FileCOM}}</td>
            <td>{{f.FileSite}}</td>
          </tr>
        </tbody>
      </table>

Erro

I expect to render a list of boolens values.

**DataCriacao: "/Date(-62135596800000)/"
DataFim: "06/07/2018"
DataInicio: "26/06/2018"
DescricaoServico: null
FileCOM: (2) [true, false]
FileCTB: (2) [false, false]
FileCodigo: 190562
FileCodigoId: 0
FileCodigoNv: null
FileMimeType: null
FileSite: (2) [false, false]**

[SOLVED] I find de solution making the above solution:

<tbody>
  <tr>
    <td>Documentos</td>
    <td>Comandos</td>
    <td><span ng-repeat="(key, value) in File.FileCTB track by $index"> 
         {{value}}</span></td>
    <td><span ng-repeat="(key, value) in File.FileCOM track by $index"> 
         {{value}}</span></td>
    <td><span ng-repeat="(key, value) in File.FileSite track by $index"> 
         {{value}}</span></td>
  </tr>
</tbody>

Solution

  • I solved this problem storing in a viewModel object all date below:

    DataCriacao: "/Date(-62135596800000)/"
    DataFim: "06/07/2018"
    DataInicio: "26/06/2018"
    DescricaoServico: null
    FileCOM: (2) [true, false]
    FileCTB: (2) [false, false]
    FileCodigo: 190562
    FileCodigoId: 0
    FileCodigoNv: null
    FileMimeType: null
    FileSite: (2) [false, false]
    

    So, I can iterate only in the attribute that is collections ou array.