//Donnees JSON
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
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 !" } ] }
VOICI LE CONTENU DE MON FICHIER 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); } } }
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)
Partager