angularjs n’affiche rien

Fatima Dirham
Javascript

Bonjour,

je rencontre un petit problème avec mon code.
voilà la page html listClients.html

<body ng-app="myAvocatApp" ng-controller="myAvocatController">
        <script type="text/javascript" src="angular/angular.min.js"></script>
        <script type="text/javascript" src="js/myApp.js"></script>
<form >
        <label>physique</label>
            <input type="radio" ng-model="genre" value="p">
        <label>normal</label>
            <input type="radio" ng-model="genre" value="n">
        <button ng-click="chargerClient()" >afficher</button>
    </form>    
    <p  ng-repeat="c in clients ">
        nom:{{c.nomClient}}<br/>
        nom:{{c.prenomClient}}<br/>
    </p>
</body>

voilà mon code angularjs myApp.js :

var app=angular.module("myAvocatApp",[]);
app.controller("myAvocatController",function($scope,$http){
    $scope.clients=[] ;
    $scope.genre=null;
    $scope.chargerClient=function(){
    $http.get("/clients/"+$scope.genre)
    .then(function(data){
     $scope.clients = data ;
    }) ;
    };
});

le but est d'afficher la liste des client normals ou physiques , j'ai travaillé avec spring boot, j'ai arrivé de recuperer les donnees de la base de données et le console du navigateur montre cela, le probleme de j'ai c'est rien n'affiche sur la page html et je ne sais pas pourquoi .
merci d'avance

19 réponses

emile01
Réponse acceptée

Bonjour,

D'aprés dernier affichage des résultats, j'ai constaté que tu as un mauvaise format de JSON (j'en sais pas pourquoi). Donc essayez d'afficher la liste des clients dans le console de ton IDE (eclipse ou netbeans) pour voir si le probléme proviens de JPA ou bien le retour d'angularJS.
Aprés, donne moi le résultat.

saibe

hello,
place tes scripts après le body pour voir....

Fatima Dirham
Auteur

j'ai fait comme cela mais ça marche pas encore

<body ng-app="myAvocatApp" ng-controller="myAvocatController">
<form >
        <label>physique</label>
            <input type="radio" ng-model="genre" value="p">
        <label>normal</label>
            <input type="radio" ng-model="genre" value="n">
        <button ng-click="chargerClient()" >afficher</button>
    </form>    
    <p  ng-repeat="c in clients ">
        nom:{{c.nomClient}}<br/>
        nom:{{c.prenomClient}}<br/>
    </p>

            <script type="text/javascript" src="angular/angular.min.js"></script>
           <script type="text/javascript" src="js/myApp.js"></script>
</body>
Lartak

Bonjour.
Est-ce que tu as regardé dans la console de l'inspecteur de ton navigateur pour voir si tu n'as pas un retour d'erreur ?

emile01

Bonjour,
Fatima Dirham cet url refléte a quel API? je parle de langage.

$http.get("/clients/"+$scope.genre)
Fatima Dirham
Auteur

Merci à vous
Lartak
oui je consulte à chaque fois le console, il ne me remene aucune erreur et n'affiche rien , mais lorsque j'utilise les outils de developement de navigateur, je vois les données recuperées de la base de données (je parle ici de la zone network).

emile01around
j'utilise jee avec le framework spring et restfull

@RestController
public class AppControllers {

              @Autowired
              private IMetier metier;
              @RequestMapping(value="/clients/n",method=RequestMethod.GET)
              public List<Normal> allNormls() {
                  return metier.allNormls();
              }
              @RequestMapping(value="/clients/p",method=RequestMethod.GET)
              public List<Physique> allPhysiques() {
                  return metier.allPhysiques();
              }
    }
emile01

Ton probléme que l'AIP REST ne sait pas le paramétre $scope.genre.
Donc il faut modifier ton code de l'API en suivi çà (appliquez le méme principe pour la fonction "allPhysiques"):

@RequestMapping(value="/clients/n",method=RequestMethod.GET)
              public List<Normal> allNormls( @Param("genre") String genre ) {
                  return metier.allNormls(genre); // modifier aussi le code de la fonction  "allNormls" selon le genre
              }

L'url de l'API dans ton code angualarjs est comme çà:

$http.get("/clients/"+$scope.genre)

Par contre tu as mis l'url "/clients/n" dans le code jax-rs (API rest). Alors essayez de remplacer çà:

$http.get("/clients/"+$scope.genre)

à

$http.get("/clients/n?genre="+$scope.genre)

Pour fixer le probléme, je te conseil d'utiliser console.log dans votre code pour voir si il y a un erreur ou bien les données. Puis renvoyez moi le résultat du console.log.

console.log("genre du client "+$scope.genre); //
$scope.chargerClient=function(){
   $http.get("/clients/n?genre="+$scope.genre)
    .then(function(data){
     $scope.clients = data ;
     console.log(" Liste des clients "+data); //
    }) ;
    };
Fatima Dirham
Auteur

Bonjour emile01
j'ai fait ce vous avez domendez, j'ai essayé seulement avec la foncton allNormls() mais le problème reste le même, et rien n'affiche sur le consolen même les phrases "genre du client" et " Liste des clients"

emile01

Tu as Modifier le coeur de la fonction metier.allNormls(genre)?. De plus dans url de l'API vous n'avez pas mis le host et le port de ton serveur d'application. Donc,essayez çà selon ton host et ton port du serveur.

var url ="http://localhost:TonPort/path_d_application_s_il_existe";
  $http.get(url+"/clients/n?genre="+$scope.genre)

Testez aussi le fonctionnement ton version d'angularjs en réalisant une fonction qui affiche un simple message dans le console.

//html
<button  type="submit" on-click="TestFonction()"> Test Fonction</button>

//angular
$scope.TestFonction=function(){
     console.log(" hello  "); //
    };
Fatima Dirham
Auteur

j'ai pas besoin de specifier le host c'est spring boot qui va charger de ça, et je travail avec web service.
j'ai changé mon code
j'ai eliminé les 2 fonctions et je l'ai remplacé par une seul fonction qui recupere à la fois les clients physiques et les clients normaux

voilà le code controleur:

@RestController
public class Controllers {
    @Autowired
    private InfMetier infMetier;

    @RequestMapping(value="/clients", method=RequestMethod.GET)
    public List<Client> listClients() {
        return infMetier.listClients();
    }

}

voilà la couche metier:

@Service
public class ImplMetier implements InfMetier {

    @Autowired
    private ClientRepository clientRepository;

    @Override
    public List<Client> listClients() {
        return clientRepository.findAll();
    }
}

voilà l'interface repository:
public interface ClientRepository extends JpaRepository<Client, Long> {

}
au niveau presentation
voilà ma page html "listClients.html" 

<body ng-app="listClients" ng-controller="listClientsController">
      <p  ng-repeat="c in clients ">
            nom:{{c.nomClient}}<br/>
            prenom:{{c.prenomClient}}<br/>
      </p>
      <script type="text/javascript" src="angular/angular.min.js"> </script>
      <script type="text/javascript" src="js/listClients.js"> </script>
</body>

voilà la partie d'angularJS

var app=angular.module("listClients",[]);
    app.controller("listClientsController",function($scope,$http){
        $scope.clients=[] ;
        $http.get("/clients")
        .then(function(data)
                     $scope.clients = data ;     });
});

mais encore le probleme est le meme, lorsque je tape dans le navigateur 

127.0.0.1:8050/clients

je recevois les données, mais lorsque je passe à ma page listClients.html

127.0.0.1:8050/listClients.html

je ne recevois rien meme au niveau console, et lorsque je consulte le reseau je vois qu'il un passage de données et le console d'eclipse me montre que hibernat a fait la selectin des données de la base,
mais je ne sais pas pourquoi les données ne s'affichent pas
veuillez m'aider s'il veut plait je suis bloqué dans ce point

emile01

Bonsoir,

Je te conseil d'utiliser .then et .catch pour fixer le probléme du code. A chaque traitement des données essayer de mettre le code dans une fonction comme ceci:

app.controller("listClientsController",function($scope,$http){
        $scope.clients=[] ;

        $scope.chargerClient=function(){
        $http.get("/clients")
        .then(function(data)
                $scope.clients = data ;   
                  console.log('Liste des clients:  '+data);
           }).catch(function(e) {
            console.log('error: ', e);
            throw e;
        });
    };     

});

En basant sur la derniére modification du ton code, il faut par défaut appeler la fonction chargerClient car lorsque tu accéde à 127.0.0.1:8050/listClients.html angularjs n'a pas une fonction précise à exécuter. Par contre, la fonction $scope.chargerClient=function(){ ..} attend l'action d'un élément : button ou lien etc..

Alors, il faut ajouter cette ligne aprés la fonction chargerClient pour charger par défaut la liste des clients:

$scope.chargerClient();

Note: Vérifier si tu a bien ton page "html" lorsque tu accéde a cette adresse : 127.0.0.1:8050/listClients.html.

Renvoyez moi les résultats du console log.

A+

Fatima Dirham
Auteur

Bonjour,
j'ai fait exactement ceque vous avez demandez et le console affiche selement cette phrase : 

Liste des clients:  [object Object]

j'ai ajouté cette phrase à ma page html

<h1>Liste des clients</h1><br>

et ça marche la phrase s'affiche mais sans les données, voilà une apperçu à ce que donne le navigateur

Liste des clients

nom:
prenom:
nom:
prenom:
nom:
prenom:
nom:
prenom:
nom:
prenom:
Fatima Dirham
Auteur

vous voulez dire le fichier html, le voilà

<body ng-app="listClients" ng-controller="listClientsController">
<h1>Liste des clients</h1><br>
<p  ng-repeat="c in clients ">
nom:{{c.nomClient}}<br/>
prenom:{{c.prenomClient}}<br/>
</p>
<script type="text/javascript" src="angular/angular.min.js"> </script>
<script type="text/javascript" src="js/listClients.js"> </script>
</body>
emile01

Bonjour,
D'aprés cette ligne:

Liste des clients:  [object Object]

Vous avez donc la liste des clients. Car si vous étes mal récupérer les objets des clients, il affiche l'erreur qu'il contient.

Pour voir clairement tes objets, essayez de les construire en format JSON (Renvoyez moi les résultats d'affichage):

console.log('Liste des clients:    '+JSON.stringify(data));

Si tu as mis la visibilité des variables private .Alors, vérifiez si tu as bien défini les getters(récupération) , les setters (modification) et les noms de chaque variables dans ton classe clients. Car si tu les n'as pas mis correctement donc il ne récupére et il ne modifie pas le contenu des variables.

Fatima Dirham
Auteur

voilà le resultat du console

Liste des clients:  {"data":[{"type":"NR","idClient":1,"nomClient":"nc1","prenomClient":"pc1","adressClient":"adress1","emailClient":"c1@gmail.com","teleClient":102,"faxClient":25,"dateAddClient":1491001200000,"comptes":[],"avocat":null,"Dossiers":[],"cinNorm":"cin1","dossiers":[]},{"type":"PH","idClient":2,"nomClient":"nc2","prenomClient":"pc2","adressClient":"adress2","emailClient":"c2@gmail.com","teleClient":104,"faxClient":302,"dateAddClient":1491087600000,"comptes":[],"avocat":null,"Dossiers":[],"nomComPh":"BMCE","numComPh":"123","dossiers":[]}],"status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"/clients","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":""}
Fatima Dirham
Auteur

je n'ai pas encore résolu le probleme je ne sais pas pouquoi il apparait comme il est resolu

Fatima Dirham
Auteur

ce sont les données reécuperées par angularJS, comment le fichier Json est mal formaté.

Fatima Dirham
Auteur

quelle est la solution??

Fatima Dirham
Auteur

Bonjour,
j'ai modifié un peu dans ng-repeat :

<p  ng-repeat="client in clients.data ">
nom:    {{client.nomClient}}<br/>
prenom: {{client.prenomClient}}<br/>

</p>

je doit seu j'ai du seulement accéder à data puis faire l'affichage, et ça marche, j'ai pu récuperé les donées de ma base, Merci boucoup