Sort items with angular

Question

I am working on a system that requires data pagination, but before I would like to sort the json I receive in the order of users' names.

JSON is in format:

[["22","Aiolinhos","23","[email protected]","Administradores","SIM"],["20","Aiorinhos","21","[email protected]","Administradores","SIM"],["6","Aldebas","7","[email protected]","Administradores","SIM"],["12","Caminhus","13","[email protected]","Administradores","SIM"],["18","Ditinho","19","[email protected]","Administradores","SIM"],["3","Dohkinho","3","[email protected]","Administradores","SIM"],["8","Kanonzinho","9","[email protected]","Administradores","SIM"],["14","Milinho","15","[email protected]","Administradores","SIM"],["4","Muzinho","4","[email protected]","Administradores","SIM"],["2","Saguinha","2","[email protected]","Administradores","SIM"],["1","Shakinha","1","[email protected]","Administradores","SIM"],["16","Shionzinho","17","[email protected]","Administradores","SIM"],["10","Shurinha","11","[email protected]","Administradores","SIM"]]

And the html+angular snippets I created to show this data to the user are:

<div class="container">
  <div class="jumbotron">

    <div class="row">
      <div class="col-xs-12 text-right">
        <button type="button" class="btn btn-secondary" ng-click="create()">Novo</button>
      </div>
    </div>

    <table class="table table-hover">
      <thead>
        <tr>
          <td ng-repeat="header in headers track by $index">{{header}}</td>
          <td ng-if="headers.length">Editar / Remover</td>
        </tr>
      </thead>
      <tr ng-repeat="row in rows | orderBy:order track by $index">
        <td ng-repeat="cell in row track by $index" ng-if="!$first">{{cell}}</td>
        <td ng-if="row.length"><button type="button" class="btn btn-secondary glyphicon glyphicon-pencil" ng-click="edit(row)"></button>
          <button type="button" class="btn btn-danger glyphicon glyphicon-trash" ng-click="delete(row)"></button></td>
      </tr>
    </table>
  </div>
</div>



 controller:function($scope,$routeParams,$location,crudservice){
      $scope.headers = [];
      $scope.rows = [[]];
      $scope.modelPath = $routeParams.model;
      $scope.order = 0;
      crudservice.model = {};

      crudservice.listModel($routeParams.model).then(function(response){
        if(response.data.status == 1){
          var data = response.data;
          console.log(JSON.parse(data.headers));
          console.log(JSON.parse(data.rows));
          $scope.headers = JSON.parse(data.headers);
          $scope.rows = JSON.parse(data.rows);
        }
      });

But it turns out that the table does not show some lines, besides the cells Name, E-mail, Group, Assets and Edit/Remove are in places that should not:

Any assumptions as to why this is happening?

Answer 1

All items that are not appearing have the values of the first and third columns equal:

["3","Dohkinho","3","[email protected]","Administradores","SIM"],
["4","Muzinho","4","[email protected]","Administradores","SIM"],
["2","Saguinha","2","[email protected]","Administradores","SIM"],
["1","Shakinha","1","[email protected]","Administradores","SIM"]

However your code should be functional, as shown in the following (functional) example:

angular.module('myApp', [])
.controller('myController', function($scope){

$scope.rows = [["22","Aiolinhos","23","[email protected]","Administradores","SIM"],["20","Aiorinhos","21","[email protected]","Administradores","SIM"],["6","Aldebas","7","[email protected]","Administradores","SIM"],["12","Caminhus","13","[email protected]","Administradores","SIM"],["18","Ditinho","19","[email protected]","Administradores","SIM"],["3","Dohkinho","3","[email protected]","Administradores","SIM"],["8","Kanonzinho","9","[email protected]","Administradores","SIM"],["14","Milinho","15","[email protected]","Administradores","SIM"],["4","Muzinho","4","[email protected]","Administradores","SIM"],["2","Saguinha","2","[email protected]","Administradores","SIM"],["1","Shakinha","1","[email protected]","Administradores","SIM"],["16","Shionzinho","17","[email protected]","Administradores","SIM"],["10","Shurinha","11","[email protected]","Administradores","SIM"]];

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div ng-app="myApp">
    <div ng-controller="myController">
        <div class="container">
            <div class="jumbotron">
                <table class="table table-hover">
                    <tr ng-repeat="row in rows | orderBy:order track by $index">
                        <td ng-repeat="cell in row track by $index" ng-if="!$first">{{cell}}</td>
                        <td ng-if="row.length">
                            <button type="button" class="btn btn-secondary glyphicon glyphicon-pencil" ng-click="edit(row)"></button>
                            <button type="button" class="btn btn-danger glyphicon glyphicon-trash" ng-click="delete(row)"></button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

My suspicion is that your source is somehow manipulating the array of arrays, creating a map invalid.

Answer 2

Solved! the/

I modified my userRestController:

@RequestMapping(value = "/usuario/list", method = RequestMethod.GET)
public String listar() {
    Gson gson = new Gson();
    Map<String, String> response = new HashMap<String, String>();

    String[] headers = {"ID" ,"Nome", "Login", "E-mail", "Grupo", "Ativo" };
    List<String> usuario = new ArrayList<String>();
    try {
        this.usuarioList = usuarioService.listarUsuarios(this.pesquisa);
        String[][] usuarios = new String[usuarioList.size()][];
        response.put("status", "1");
        response.put("headers", gson.toJson(headers));
        for (int i = 0; i < usuarioList.size(); i++) {
            usuario = new ArrayList<String>();
            usuario.add(usuarioList.get(i).getId().toString());
            usuario.add(usuarioList.get(i).getNome());

            usuario.add(usuarioList.get(i).getLogin());
            usuario.add(usuarioList.get(i).getEmail());
            usuario.add(usuarioList.get(i).getGrupo().getNome());
            usuario.add(usuarioList.get(i).getAtivo().name());
            usuarios[i] = usuario.toArray(new String[usuario.size()]);

        }

        response.put("rows", gson.toJson(usuarios));


    } catch (Exception e) {
        response.put("status", "0");
        e.printStackTrace();
    }
    return gson.toJson(response);
}

I added the "ID" string to the headers array, so that the view could "match" to what came from the database. Now he’s sorting and doing the data crud. Note: I do not know if this is a good way to solve this problem, but it was the one that best served me at the time.