How to place two ng-repeat in the same view, Ionic/ Angularjs?

Asked

Viewed 411 times

0

I have to list two types of interconnected arrays in the same view. But I’m not being able to list.

EDITED: BETTER EXPLANATION

I have four tables:

valuation, user_app, item_orders, cadastra_offer

In the first array: $Scope.evaluations = [];

I have an SQL with the result:

  $query="SELECT
   avaliacao.cod_avaliacao,
   avaliacao.cod_cliente,
   avaliacao.cod_fornecedor,
   avaliacao.prato,
   avaliacao.aparencia,
   avaliacao.embalagem,
   avaliacao.entrega,
   avaliacao.atendimento,
   avaliacao.custo_beneficio,
   avaliacao.media,
   avaliacao.observacoes,
   avaliacao.data_hora_pedido,
   avaliacao.iddados_pedido,
   usuario_app.cod_cliente,
   usuario_app.nome,
   usuario_app.pais,
   usuario_app.cep,
   usuario_app.logradouro,
   usuario_app.complemento,
   usuario_app.bairro,
   usuario_app.cidade,
   usuario_app.estado,
   usuario_app.celular,
   usuario_app.numero,
   usuario_app.nascimento,
   item_pedidos.iditens_pedido,
   item_pedidos.tit_pedido,
   item_pedidos.imagem,
   item_pedidos.preco_un,
   item_pedidos.qtd,
   item_pedidos.cod_fornecedor,
   item_pedidos.iddados_pedido,
   cadastra_oferta.cod_oferta,
   cadastra_oferta.cod_fornecedor,
   cadastra_oferta.cod_categoria_com,
   cadastra_oferta.titulo_promocao,
   cadastra_oferta.descricao,
   cadastra_oferta.foto,
   cadastra_oferta.valor_sem_desconto,
   cadastra_oferta.valor_com_desconto,
   cadastra_oferta.desconto,
   cadastra_oferta.validade_oferta,
   cadastra_oferta.igredientes,
   cadastra_oferta.qtd_estoque
FROM
   avaliacao INNER JOIN usuario_app ON avaliacao.cod_cliente = usuario_app.cod_cliente
   INNER JOIN item_pedidos ON avaliacao.iddados_pedido = item_pedidos.iddados_pedido
   INNER JOIN cadastra_oferta ON item_pedidos.tit_pedido = cadastra_oferta.titulo_promocao
WHERE
   avaliacao.cod_fornecedor='$cod_vovo'";

The return of this first JSON is this (an example):

[{"cod_avaliacao":"48","cod_cliente":"14","cod_fornecedor":"1","prato":"5","aparencia":"5","embalagem":"2","entrega":"1","atendimento":"5","custo_beneficio":"3","media":"4","observacoes":"sddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd","data_hora_pedido":"2017-04-11 10:34:55","iddados_pedido":"554","nome":"Ramos de S Janones","pais":"","cep":"38300073","logradouro":"Rua 16","complemento":"Apto 2","bairro":"Centro","cidade":"Ituiutaba","estado":"MG","celular":"34999999999","numero":"1511","nascimento":"0000-00-00","iditens_pedido":"457","tit_pedido":"Bacalhau ao molho Sunset","imagem":"http:\/\/vovocooks.com.br\/admin\/vovos\/_lib\/file\/img\/app_img\/1490803982070.jpg","preco_un":"89.70","qtd":"1","cod_oferta":"129","cod_categoria_com":"36","titulo_promocao":"Bacalhau ao molho Sunset","descricao":"Bacalhoada ao molho sunset.","foto":"1490803982070.jpg","valor_sem_desconto":"100.00","valor_com_desconto":"89.70","desconto":"10.30","validade_oferta":"2017-06-28","igredientes":"To inventando.","qtd_estoque":"8"},{"cod_avaliacao":"50","cod_cliente":"14","cod_fornecedor":"1","prato":"5","aparencia":"4","embalagem":"1","entrega":"2","atendimento":"3","custo_beneficio":"2","media":"3","observacoes":"Avalia\u00e7\u00e3o....","data_hora_pedido":"2017-04-15 13:58:08","iddados_pedido":"566","nome":"Ramos de S Janones","pais":"","cep":"38300073","logradouro":"Rua 16","complemento":"Apto 2","bairro":"Centro","cidade":"Ituiutaba","estado":"MG","celular":"34999999999","numero":"1511","nascimento":"0000-00-00","iditens_pedido":"471","tit_pedido":"Bacalhau ao molho Sunset","imagem":"http:\/\/vovocooks.com.br\/admin\/vovos\/_lib\/file\/img\/app_img\/1490803982070.jpg","preco_un":"89.7","qtd":"1","cod_oferta":"129","cod_categoria_com":"36","titulo_promocao":"Bacalhau ao molho Sunset","descricao":"Bacalhoada ao molho sunset.","foto":"1490803982070.jpg","valor_sem_desconto":"100.00","valor_com_desconto":"89.70","desconto":"10.30","validade_oferta":"2017-06-28","igredientes":"To inventando.","qtd_estoque":"8"}]

The second array: $Scope.requests. = [];

The following SQL:

    $query="SELECT
   avaliacao.cod_avaliacao,
   avaliacao.cod_cliente,
   avaliacao.cod_fornecedor,
   avaliacao.prato,
   avaliacao.aparencia,
   avaliacao.embalagem,
   avaliacao.entrega,
   avaliacao.atendimento,
   avaliacao.custo_beneficio,
   avaliacao.media,
   avaliacao.observacoes,
   avaliacao.data_hora_pedido,
   avaliacao.iddados_pedido,
   item_pedidos.iditens_pedido,
   item_pedidos.tit_pedido,
   item_pedidos.imagem,
   item_pedidos.preco_un,
   item_pedidos.qtd,
   item_pedidos.cod_fornecedor,
   item_pedidos.iddados_pedido
FROM
   avaliacao INNER JOIN item_pedidos ON avaliacao.iddados_pedido = item_pedidos.iddados_pedido
WHERE
   avaliacao.cod_fornecedor='$cod_vovo'";

The return of this second JSON is:

[{"cod_avaliacao":"48","cod_cliente":"14","cod_fornecedor":"1","prato":"5","aparencia":"5","embalagem":"2","entrega":"1","atendimento":"5","custo_beneficio":"3","media":"4","observacoes":"sddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd","data_hora_pedido":"2017-04-11 10:34:55","iddados_pedido":"554","iditens_pedido":"457","tit_pedido":"Bacalhau ao molho Sunset","imagem":"http:\/\/vovocooks.com.br\/admin\/vovos\/_lib\/file\/img\/app_img\/1490803982070.jpg","preco_un":"89.70","qtd":"1"},{"cod_avaliacao":"48","cod_cliente":"14","cod_fornecedor":"1","prato":"5","aparencia":"5","embalagem":"2","entrega":"1","atendimento":"5","custo_beneficio":"3","media":"4","observacoes":"sddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd","data_hora_pedido":"2017-04-11 10:34:55","iddados_pedido":"554","iditens_pedido":"458","tit_pedido":"Teate edicao","imagem":"http:\/\/vovocooks.com.br\/admin\/vovos\/_lib\/file\/img\/app_img\/1491174503493.jpg","preco_un":"9.00","qtd":"1"},{"cod_avaliacao":"50","cod_cliente":"14","cod_fornecedor":"1","prato":"5","aparencia":"4","embalagem":"1","entrega":"2","atendimento":"3","custo_beneficio":"2","media":"3","observacoes":"Avalia\u00e7\u00e3o....","data_hora_pedido":"2017-04-15 13:58:08","iddados_pedido":"566","iditens_pedido":"470","tit_pedido":"Pizza Grande de Calabresa   Coca-Cola 2 Litros!!!","imagem":"http:\/\/vovocooks.com.br\/admin\/vovos\/_lib\/file\/img\/app_img\/Pizza Calabresa.jpeg","preco_un":"29","qtd":"1"},{"cod_avaliacao":"50","cod_cliente":"14","cod_fornecedor":"1","prato":"5","aparencia":"4","embalagem":"1","entrega":"2","atendimento":"3","custo_beneficio":"2","media":"3","observacoes":"Avalia\u00e7\u00e3o....","data_hora_pedido":"2017-04-15 13:58:08","iddados_pedido":"566","iditens_pedido":"471","tit_pedido":"Bacalhau ao molho Sunset","imagem":"http:\/\/vovocooks.com.br\/admin\/vovos\/_lib\/file\/img\/app_img\/1490803982070.jpg","preco_un":"89.7","qtd":"1"}]

What I want is in the view, there is in the evaluation table the idD_request field that can contain more than one item. And these items are listed.

I don’t know if I’m doing it right, creating two JSON. Or if there’s a better alternative.

Now the project:

First, my view:

 <ion-view title="avaliações">

    <ion-content padding="true" class="has-header">

        <ion-refresher pulling-text="Puxe para atualizar..." on-refresh="getavaliacoes()"></ion-refresher>


        <div>
            <center>
                <h4>Esta Vovó Cozinheira possui 0{{quantida_avaliacoes}} avaliações.</h4>
            </center>
        </div>

        <div ng-repeat="avalia in avaliacoes | unique: 'cod_avaliacao'">



            <div class="card">


                <h5 id="avaliaEs-heading30" style="color:#000000;">Avaliado por: {{avalia.nome}}</h5> Em: {{avalia.data_hora_pedido | date:"dd/MM/yyyy 'às' h:mma"}}

                <div class="item item-body">
                    <ion-list ng-repeat="produtos in pedidos track by $index">
                        <ion-item class="item-avatar royal">
                            <img src="{{produtos.imagem}}">  
                            <h2royal>{{produtos.tit_pedido}}</h2royal>
                        </ion-item>                        
                    </ion-list>
                </div>


                <div class="spacer" style="width: 300px; height: 5.99432px;"></div>


                <h5 id="avaliaEs-heading19" style="color:#000000;">Delícia: <span class="stars alignright">
          <span ng-style="{ 'width': getStars(avalia.prato) }"></span> </h5>

                <h5 id="avaliaEs-heading27" style="color:#000000;">Aparência: <span class="stars alignright">
          <span ng-style="{ 'width': getStars(avalia.aparencia) }"></span></h5>

                <h5 id="avaliaEs-heading27" style="color:#000000;">Atendimento: <span class="stars alignright">
          <span ng-style="{ 'width': getStars(avalia.atendimento) }"></span></h5>

                <h5 id="avaliaEs-heading29" style="color:#000000;">Custo x Benefício <span class="stars alignright">
          <span ng-style="{ 'width': getStars(avalia.custo_beneficio) }"></span></h5>

                <h5 id="avaliaEs-heading28" style="color:#000000;">Embalagem <span class="stars alignright">
          <span ng-style="{ 'width': getStars(avalia.embalagem) }"></span></h5>

                <h5 id="avaliaEs-heading29" style="color:#000000;">Prazo de Entrega <span class="stars alignright">
          <span ng-style="{ 'width': getStars(avalia.entrega) }"></span></h5>


                <div class="spacer" style="width: 300px; height: 15.9943px;"></div>

                <div class="card">
                    <p style="white-space:normal;">
                        <b>Avaliação: </b> {{avalia.observacoes}}
                    </p>
                </div>



                <h5 id="avaliaEs-heading29" style="color:#000000;">Média: <span class="stars alignright">
                    <span ng-style="{ 'width': getStars(avalia.media) }"></span> </h5>

                </h5>
                </h5>
                </h5>
                </h5>
                </h5>
                </h5>
                </h5>


            </div>



        </div>

    </ion-content>
</ion-view>

Here I have two ng-repeat:

The first is the main:

        <div ng-repeat="avalia in avaliacoes | unique: 'cod_avaliacao'">

The second is what I intend to link and list the items where the field items idy_requested = to the idy_requested table values is equal to the itens_requested table, as explained at the beginning...:

<div class="item item-body">
                <ion-list ng-repeat="produtos in pedidos track by $index">
                    <ion-item class="item-avatar royal">
                        <img src="{{produtos.imagem}}">  
                        <h2royal>{{produtos.tit_pedido}}</h2royal>
                    </ion-item>                        
                </ion-list>
            </div>

I made two calls on my controllers, one for evaluations and one for requests (Both alike):

     // LISTA PRODUTOS    
            $scope.avaliacoes = [];
            $scope.getavaliacoes = function () {
                $scope.avaliacoes = [];
                $ionicLoading.show();
                var url = "?cod_vovo=" + $scope.cod_vovo;
                console.log(url);
                var encodedurl = encodeURI(url);


                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        var responseishere = xmlhttp.responseText;
                        if (responseishere == "error") {
                            $scope.nothing = 1;
                            $ionicLoading.hide();
                            $scope.$broadcast('scroll.refreshComplete');
                        } else {
                            $ionicLoading.hide();
                            var myobj = JSON.parse(responseishere);
                            for (var i = 0; i < myobj.length; i++) {
                                $scope.avaliacoes.push(myobj[i]);
                            }
                            var len = myobj.length;
                            //                            if (len !== '0') {
                            $scope.quantida_avaliacoes = len;
                            window.localStorage.setItem("qtd_avalia", $scope.quantida_avaliacoes);
                            $scope.$broadcast('scroll.refreshComplete');
                        }

                    }
                };
                xmlhttp.open("GET", "http://vovocooks.com.br/admin/apis/api_listagem/lista_avalia_novo.php" + encodedurl, true);
                xmlhttp.send();
            };
            $scope.getavaliacoes();
            // FIM LISTA PRODUTOS



        // LISTA OS ITENS PEDIDOS    
            $scope.pedidos = [];
            $scope.getpedidos = function () {
                $scope.pedidos = [];
                console.log("Entrou em pedidos");
                $ionicLoading.show();

                $scope.cod_vovo = window.localStorage.getItem("cod_vovo_pedido");


                var url = "?cod_vovo=" + $scope.cod_vovo;
                var encodedurl = encodeURI(url);
//                console.log(url);

                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        var responseishere = xmlhttp.responseText;
                        if (responseishere == "error") {
                            $scope.nothing = 1;
                            $ionicLoading.hide();
                            $scope.$broadcast('scroll.refreshComplete');
                        } else {
                            $ionicLoading.hide();
                            var myobj = JSON.parse(responseishere);
                            for (var i = 0; i < myobj.length; i++) {
                                $scope.avaliacoes.push(myobj[i]);
                            }                          
                            $scope.$broadcast('scroll.refreshComplete');
                        }

                    }
                };
                xmlhttp.open("GET", "http://vovocooks.com.br/admin/apis/api_listagem/lista_avaliacoes_detalhe.php" + encodedurl, true);
                xmlhttp.send();
            }
            $scope.getpedidos();

But I return only the first ng-repeat.

What could I be doing wrong? Or is there another way?

  • 1

    You are more caught up for the angular & object orientation than for the ng-views themselves. Two suggestions: 1. Take a look at the angular and its components calmly and try to work with objects. 2. do not ajax in hand, use the angular lifecycle and take advantage of the $http mobile of it that already encapsulates the call in a Promise (extremely important concept to work with the angular).

1 answer

3


var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var responseishere = xmlhttp.responseText;
                    if (responseishere == "error") {
                        $scope.nothing = 1;
                        $ionicLoading.hide();
                        $scope.$broadcast('scroll.refreshComplete');
                    } else {
                        $ionicLoading.hide();
                        var myobj = JSON.parse(responseishere);
                        for (var i = 0; i < myobj.length; i++) {
                            //$scope.avaliacoes.push(myobj[i]);
                              $scope.pedidos.push(myobj[i]);
                        }                          
                        $scope.$broadcast('scroll.refreshComplete');
                    }

                }
            };

You are not putting the data in the requested array. And I think you can change this whole part by just using the angular $http.get, it’s going to look something like this:

    $http.get("http://vovocooks.com.br/admin/apis/api_listagem/lista_avaliacoes_detalhe.php" + encodedurl).then(function(data){ 
   /* mexe com seu array aqui */
}).catch(function(err){
    /* erro */
});
  • Thank you @Douglas, it worked perfect. And what a lack of attention to mine. It was well worth!

  • 1

    Tranquil , just try to take a look at the angular $http so you avoid doing all this, to make the code lighter and readable, takes care!!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.