Impossible d afficher une partie de mon fichier json dans ma page HTML je débute

**thalio33** · 22/01/2018, 18h41

//Donnees JSON

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
var restaurants=[
   {
      "restaurantName":"Bronco",
      "address":"39 Rue des Petites Écuries, 75010 Paris",
      "lat":48.8737815,
      "long":2.3501649,
      "ratings":[
         {
            "stars":4,
            "comment":"Un excellent restaurant, j'y reviendrai ! Par contre il vaut mieux aimer la viande."
         },
         {
            "stars":5,
            "comment":"Tout simplement mon restaurant préféré !"
         }
      ]
   },
   {
      "restaurantName":"Le Matignon",
      "address":"15 Avenue Matignon, 75008 Paris",
      "lat":48.8703218,
      "long":2.3122194,
      "ratings":[
         {
            "stars":4,
            "comment":"Probablement la place la plus tendance à Paris en ce moment!. Vous pouvez manger sur place, mais ce qui est preferé sont les cocktail d'après diner."
         },
         {
            "stars":5,
            "comment":"Bonne nourriture, atmosphere et service !"
         }
      ]
   }

Fonction qui affiche la liste des restaurants sur ma page HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function afficheListe(i){
   var resultats=[];
   for (var i=0;i<restaurants.length;i++){
      for(var j=0;j<restaurants[i].ratings.length;j++){
 
      resultats[i] =  "<ul id=restaurant'><li>"+restaurants[i].restaurantName+"</li><ul id='encart'><li>"+restaurants[i].address+"</li>"+restaurants[i].ratings[j].stars+" etoiles " +"</br>"+restaurants[i].ratings[j].comment+"</br>"+"</ul></ul>"+ '<br />';
      $("#resultat").html(resultats);
 
      }
   }
}

VOICI LE CONTENU DE MON FICHIER 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>test</title>
	<style>
#restaurant{
        background-color: black;
        color:white;
}
 
#contenu1{
        padding:20px;
        width:50%;
        min-height: 35%;
        background-color: #095c9b;
        border:2px solid grey;
}
 
#encart{
        border:5px dotted white;
        margin:10px 5px;
        padding:10px;
}
 
.cache {display:none;}
#appuie{
        margin:10px 5px;
        padding:5px;
        background-color: black;
        color:white;
}
 
        </style>
</head>
<body>
	<section id="container">
		<header>
		<h1>RESTAURANTS PARISIENS</h1>
	</header>
	<div id="contenu1">
		<div id="liste">
			<button onclick='afficheListe()' id="appuie">Afficher Liste</button>
		</div>
		<div id="resultat">
 
		</div>
	</div>
	</section>
<script type="text/javascript" src=jquery-3.2.1.js></script>
<script type="text/javascript" src=test.js></script>
</body>
</html>

Mon souci est qu il affiche sans probleme le nom du restaurant, son adresse, le premier avis MAIS il n affiche pas les avis des autres objets du tableau ratings (avis): 2ème, 3ème...nième avis (ratings)

**headmax** · 22/01/2018, 20h48

Les commentaires et ton ratings sont bien présent sur ta page suffit de voir le code source pour t'en rendre compte.
Ton soucis et que tu passe tes variables dans aucune balise html mais entre les balises ce qui cache ton texte.
voici un rendu basé sur ton exemple :

Nom : Capture d'écran de 2018-01-22 20-46-26.png
Affichages : 426
Taille : 43,1 Ko

Nom : Capture d'écran de 2018-01-22 20-46-26.png
Affichages : 426
Taille : 43,1 Ko

démo :
https://codepen.io/headmax/pen/JMzaMR?editors=0110

**thalio33** · 23/01/2018, 15h27

Merci beaucoup headmax!
J'ai bien saisi la logique de définir une variable content à l'intérieur de ma boucle for loop et d'afficher ensuite son contenu à l'intérieur d'une balise <span>.
En prime je peux maintenant afficher le nombre d'étoiles en image.
Double merci!

**headmax** · 23/01/2018, 15h51

De rien thalio, c'était une petite contribution

, bonne continuation.

Impossible d afficher une partie de mon fichier json dans ma page HTML je débute

JavaScript

Discussions similaires

Partager

Partager