Do not read the backend in View - Ionic + Angularjs:

Asked

Viewed 91 times

1

I’m able to read my backend, but I can’t show the data in my view, which I might be doing wrong?

In my controller I did the following, and at first I asked to read my backend:

.controller("restaurantesCtrl", function($scope,$state,$ionicScrollDelegate,$http,$stateParams,$timeout,$ionicLoading,$ionicPopup,$ionicPopover,$ionicSlideBoxDelegate,$ionicHistory,ionicMaterialInk,ionicMaterialMotion){


$scope.itens = [];

$http.get('http://nhac.esy.es/lista_restaurantes.php')
.success(function(itens){
    $scope.itens = itens;
    console.log("leu");  
    console.log($scope.itens = itens);
})
.error(function(erro){
   console.log(erro);
    console.log("não leu")
});

In my view I did the following:

    <ion-view view-title="Restaurantes" hide-nav-bar="false" >
    <ion-content delegate-handle="top" lazy-scroll  id="page-restaurantes" class="has-header page-restaurantes" >

        <ion-refresher pulling-text="Role para atualizar..."  on-refresh="doRefresh()"></ion-refresher>
        <ion-list class="card list">
            <div class="item item-input">
                <i class="icon ion-search placeholder-icon"></i>
                <input type="search" ng-model="q" placeholder="Procurar" aria-label="filter promoess" />
            </div>
        </ion-list>

        <div class="list" ng-repeat="r in itens track by $index" >

        <a class="item item-thumbnail-left" href="#/nhaac/restaurante_singles/">
              <img src="/img/logo_restaurante.jpg">

              <h2>{{r.fornecedores_fantasia}}  </h2>

              <h3>{{r.fornecedores_bairro}} </h3>  


                   <i><rating ng-model="contato.stars" max="rating.max"></rating></i>

              <p>Aqui a descrição do restaurante. </p>                  
              <button class="button button-block button-royal">
                  VER AS PROMOÇÕES
              </button>
            </a>

        </div>


        <ion-list class="list">
            <div class="item" ng-if="results.length == 0" >
                <p>Nenhum resultado encontrado...</p>
            </div>
        </ion-list>


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

Remembering that I am seeking the results of http://nhac.esy.es/lista_restaurantes.php

In my log, list everything. But in the view, you don’t list anything...

  • where in your html you are listing? I just found ng-repeat of "people". In the sequence of your get vc plays the result in the "return" variable, because you then set $Scope. = []; ?

  • I have corrected these questions, including here in the question. It is that I had tried in service and forgot to change the views and the controller, even so, continues the error.

  • I changed my controller to: $Scope.items = []; $http.get('http://nhac.esy.es/lista_restaurantes.php') . Success(Function(return){ $Scope.items = return; console.log("read"); console.log($Scope.items = return); }) . error(Function(error){ console.log(error); console.log("not read") });

  • I saw in your json that generates in "http://nhac.esy.es/lista_restaurantes.php" the structure is inside a key "{"user":[", see in your console.log as it comes, I could not simulate here but I believe that if you do $Scope.items = items.user; it already solves. Check your.log console.

  • Yes, this comes "{"user":[", and on the console it is listed as well. I didn’t understand where to put $Scope.items = .user items;

  • You are working with an array of objects, the objects you want to loop are inside this "user". In the sequence of your get instead of using "$Scope.items = items;" puts "$Scope.items = .user items;"

Show 1 more comment

1 answer

0

I changed my controller to:

    $scope.itens = [];

$http.get('http://nhac.esy.es/lista_restaurantes.php')
.success(function(retorno){
    $scope.itens = retorno;
    console.log("leu");  
    console.log($scope.itens = retorno);
})
.error(function(erro){
   console.log(erro);
    console.log("não leu")
});

And View, on the stretch:

           <div class="list" ng-controller="restaurantesCtrl" ng-repeat="r in itens" >

        <a class="item item-thumbnail-left" href="#/nhaac/restaurante_singles/">
              <img src="/img/logo_restaurante.jpg">

              <h2>{{r.fornecedores_fantasia}}  </h2>

              <h3>{{r.fornecedores_bairro}} </h3>  


                   <i><rating ng-model="contato.stars" max="rating.max"></rating></i>

              <p>Aqui a descrição do restaurante. </p>                  
              <button class="button button-block button-royal">
                  VER AS PROMOÇÕES
              </button>
            </a>

        </div>

Now the message is:

Ionic.bundle.js:26771 Error: [ngRepeat:dupes] Duplicates in a Repeater are not allowed. Use 'track by' Expression to specify Unique Keys. Repeater: r in items, Duplicate key: string:", Duplicate value: " http://errors.angularjs.org/1.5.3/ngRepeat/dupes?p0=r%20in%20items&P1=string%3A%22&P2=%22 at Ionic.bundle.js:13415 at ngRepeatAction (Ionic.bundle.js:42146) at $watchCollectionAction (Ionic.bundle.js:30081) At Scope.$Digest (Ionic.bundle.js:30216) At Scope.$apply (Ionic.bundle.js:30480) done (Ionic.bundle.js:24801) at completeRequest (Ionic.bundle.js:24999) At Xmlhttprequest.requestLoaded (Ionic.bundle.js:24940)

  • If I place ng-repeat="r in items track by $index" does not give the error, but does not present my data...

  • Guys, thank you! I’m just coming back to thank you. Thanks anyway! :))

Browser other questions tagged

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