3

Estou trabalhando em um sistema que requer paginação dos dados, mas antes eu gostaria de ordenar o json que recebo na ordem dos nomes dos usuários.

O JSON está no formato:

[["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"]]

E os trechos em html+angular que criei para mostrar esses dados para o usuário são:

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

Mas ocorre que a tabela não mostra algumas linhas, além das células Nome, E-mail, Grupo, Ativos e Editar/Remover estarem em locais que não deveriam:

inserir a descrição da imagem aqui

Alguma suposição do porquê isso estar acontecendo?

2 Respostas 2

2

Todos os itens que não estão aparecendo possuem os valores da primeira e da terceira coluna iguais:

["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"]

Entretanto seu código deveria ser funcional, como demonstrado no exemplo (funcional) a seguir:

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>

A minha suspeita é que a sua fonte esteja de alguma forma manipulando o array de arrays, criando um map inválido.

2
  • obrigada por responder. Então, eu achei o ponto em que estava errando. Na minha classe UsuarioRestController em que eu manipulava o dado da view, estava mapeando o header do json com um campo a mais, sendo que a view estava "esperando" um campo a mais. Creio que tenha sido isso que você citou, uma manipulação de map errada.
    – Alessandra
    13/04/2017 às 19:05
  • Ah, sim - em um segundo momento, dá pra notar esse efeito no screenshot que você postou. Que bom que você encontrou o problema, @Alessandra!
    – OnoSendai
    13/04/2017 às 19:11
0

Resolvido! \o/

Modifiquei meu usuarioRestController:

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

Adicionei a String "ID" ao array de headers, para que a view pudesse "casar" com o que vinha da base de dados. Agora está ordenando e fazendo o CRUD de dados. Obs.: não sei se essa é uma boa forma de resolver esse problema, mas foi a que melhor me atendeu no momento.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .