Afficher des données déjà présentes dans le json du navigateur

**francky74** · 03/11/2016, 09h44

Bonjour,

Je fait des essais avec Angular-route pour aquérir de l'expérience.

Je reçois des données en json dans le navigateur mais je n'arrive pas à les afficher dans un tableau qui est inséré dans une page html par un ng-route. Vous pouvez voir la copie d'écran ci-dessous :
Nom : json.png
Affichages : 1467
Taille : 54,5 Ko

Nom : json.png
Affichages : 1467
Taille : 54,5 Ko

J'ai essayé plusieur choses et voici le code que j'ai fait après plusieurs essais (j'ai même ajouté le ng-controller dans la balise TABLE alors que ce controller est normalement injecté par le fichier javascript :

fichier about.html qui est inséré dans acceuil.html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="jumbotron text-center">
    <h1>About Page</h1>
		<table class="table table-striped" ng-controller="aboutController">
			<thead>
				<tr>
					<th>titre</th>
					<th>corps</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="mess in messageBis">
					<td>{{mess.titre}}</td>						
					<td>{{mess.corps}}</td>		
					<td>
						<button class="btn btn-default"
							ng-click="modifier_produit_conditionne(e)">Modifier</button>
						<button class="btn btn-danger"
							ng-click="supprimer_produit_conditionne()">Supprimer</button>
					</td>
				</tr>
			</tbody>
		</table>
</div>

acceuil.html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
<meta charset="UTF-8">
<title>Acceuil</title>
	<!-- load bootstrap and fontawesome via CDN -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
 
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="js/script.js"></script>
</head>
<body ng-controller="mainController">
	<!-- HEADER AND NAVBAR -->
	<header>
		<nav class="navbar navbar-default">
			<div class="container">
				<div class="navbar-header">
					<a class="navbar-brand" href="/">Angular routing example</a>
				</div>
 
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#"><i class="fa fa-home"></i> Home </a></li>
					<li><a href="#about"><i class="fa fa-shield"></i> About </a></li>
					<li><a href="#contact"><i class="fa fa-comment"></i> Contact </a></li>
				</ul>
			</div>
		</nav>
	</header>
 
	<!-- MAIN CONTENT AND INJECTED VIEWS -->
	<div id="main">
		<div ng-view></div>
	</div>
</body>
</html>

fichier javascript (je pense qu'il n'y a pas de problème de ce côté là puisque je peux voir le json dans le navigateur) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/**
 * 
 */
 
var scotchApp = angular.module('scotchApp', ['ngRoute']);
 
scotchApp.config(function($routeProvider) {
	$routeProvider
 
	// route for the home page
	.when('/', {
		templateUrl : 'vues/home.html',
		controller : 'mainController'
	})
 
	// route for the about page
	.when('/about', {
		templateUrl : 'vues/about.html',
		controller : 'aboutController'
	})
 
	// route for the contact page
	.when('/contact', {
		templateUrl : 'vues/contact.html',
		controller : 'contactController'
	});	
 
});
 
scotchApp.controller('mainController', function($scope) {
	console.log("main controller");
	$scope.message = 'EveryOne come and see how good I look !';
});
 
scotchApp.controller('aboutController', function($scope, $http) {
	$scope.messageBis = [];
	$http.get('gestMessage').then(function(response) {
		$scope.messageBis = response.data.message;
	});
	console.log("about controller");
 
});
 
scotchApp.controller('contactController', function($scope) {
	console.log("contact controller");
	$scope.message = 'Contact page';
});

Invité · 03/11/2016, 19h50

Que dis un console.log(response); si tu l'ecris dans la fonction de rappel de $http.get('gestMessage')

Faut enlever le ng-controller de table, y'a pas besoin normalement

**francky74** · 03/11/2016, 23h03

Salut,

Merci pour votre aide.

Que dis un console.log(response);

Disons que du moment ou je vois bien les objets apparaître dans le navigateur (voir copie d'écran de mon premier message), je pense que cela ne sert à rien. Mais je l'ai essayé quand même :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
scotchApp.controller('aboutController', function($scope, $http) {
	$scope.messageBis = [];
	$http.get('gestMessage').then(function(response) {
		console.log("response : " + response);
		$scope.messageBis = response.data.message;
	});
	console.log("about controller");
});

et voici le résultat en console du navigateur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

réponse : [object Object]

Faut enlever le ng-controller de table, y'a pas besoin normalement

Tout à fait d'accord. Au début je ne l'avais pas mais voyant que je n'arrivais pas à faire apparaître mes attributs, je me suis dit que peut-être il manquait le controller ... que neni !

Du coup, je pense que c'est simplement une façon d'écrire mon objet dans le html.
Moi je l'ai écris de plusieurs manière mais aucune n'a fonctionné jusqu'à présent ... donc je suis à cours d'idées ....

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<tr ng-repeat="mess in messageBis">
	<td>{{mess.titre}}</td>						
	<td>{{mess.corps}}</td>

Invité · 04/11/2016, 11h07

chez moi ca marche avec ton code :

Nom : pb1.jpg
Affichages : 1185
Taille : 70,0 Ko

Index :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="jumbotron text-center">
    <h1>About Page</h1>
		<table class="table table-striped" ng-controller="aboutController">
			<thead>
				<tr>
					<th>titre</th>
					<th>corps</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="mess in messageBis">
					<td>{{mess.titre}}</td>						
					<td>{{mess.corps}}</td>		
					<td>
						<button class="btn btn-default"
							ng-click="modifier_produit_conditionne(e)">Modifier</button>
						<button class="btn btn-danger"
							ng-click="supprimer_produit_conditionne()">Supprimer</button>
					</td>
				</tr>
			</tbody>
		</table>
</div>

Le controleur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
angular.module('neutre', [])
 
.controller('neutreCtrl', function($scope) {
 
	$scope.messageBis = [
	{corps:"corps du message1",titre:"Titre du message 1"},
	{corps:"corps du message2",titre:"Titre du message 2"}
	];
 
 
/* FIN DU CONTROLEUR */
});

Que dit un console.log($scope.messageBis); ? C'est vraiment curieux que cela ne fonctionne pas, parfois, certains serveurs rajoutent un index dans les tableaux JSON mais cela ne doit pas gêner, je pense plutôt à un pb de routing.
Une variable $scope basique est elle bien interprétée (par exemple, écrire $scope.test = "monTest"; dans le controleur, puis {{test}} dans la vue, cela doit écrire monTest dans ta vue)

**francky74** · 06/11/2016, 14h11

Bonjour,

J'ai compris l'erreur que j'ai faite :

Dans la méthode "gestMessage" de la classe action, j'utilise un paramètre message dans une boucle for et un message Bis. En fait, j'ai simplement utilisé le mauvais nom dans le script.js.
Mais même si j'avais fait cette erreur, cela est étrange que j'ai pu voir les message dans le navigateur ... et c'est cela qui m'a fait chercher du mauvais côté !

Voici la classe action :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public String gestMessage() {
	log.info("IndexAction - gestMessage");
	Message mess1 = new Message();
	mess1.setTitre("titre du message1");
	mess1.setCorps("corps du message1");
	messageBis.add(mess1);
	Message mess = new Message();
	mess.setTitre("titre du message2");
	mess.setCorps("corps du message2");
	messageBis.add(mess);
	Message mess2 = new Message();
	mess2.setTitre("titre du message3");
	mess2.setCorps("corps du message3");
	messageBis.add(mess2);
	for(Message message : messageBis) {
		log.info("message : " + message.getTitre());
	}
 
	return SUCCESS;
}

Merci,

Afficher des données déjà présentes dans le json du navigateur

AngularJS

Vue hybride

Discussions similaires

Partager

Partager