Exemple de construction d'une page de produit à partir d'un fichier JSON

exemples/ajax-donnees-page-produit/contenu.html

@@ -0,0 +1,2 @@
+<h3>Produits</h3>
+<div id="produits" class="row"></div>

exemples/ajax-donnees-page-produit/script.js

@@ -0,0 +1,15 @@
+$.get('/produits.json', function(produits) {
+   var divProduits = $('#produits');
+   
+    produits.forEach(function(produit) {
+        divProduits.append('<div class="col-md-6 col-sm-12">' +
+            '<img class="img-thumbnail" src="' +
+                produit.image + '" />' +
+            '<div>' + produit.titre + '</div>' +
+        '</div>');
+    });
+}, 'json');
+
+$('#produits').scroll(function(e) {
+    console.log('scroll', e)
+})

exemples/liste.json

@@ -20,5 +20,6 @@
   },
   { "slug": "ajax-exemple-simple", "title": "AJAX - Exemple simple" },
   { "slug": "ajax-envoi-formulaire-par-get", "title": "AJAX - Envoi formulaire par GET" },
-  { "slug": "ajax-envoi-formulaire-par-post", "title": "AJAX - Envoi formulaire par POST" }
+  { "slug": "ajax-envoi-formulaire-par-post", "title": "AJAX - Envoi formulaire par POST" },
+  { "slug": "ajax-donnees-page-produit", "title": "AJAX - Données - page produit" }
 ]

produits.json

@@ -0,0 +1,43 @@
+[
+  {
+    "id": 1,
+    "titre": "Carte mère Socket 1150",
+    "image": "https://www.topachat.com/images/interface/category/w_/w_cm_1150/w_cm_1150-200x200.jpg"
+  },
+  {
+    "id": 2,
+    "titre": "ASRock E3C236D2I ",
+    "image": "https://media.ldlc.com/ld/products/00/03/46/13/LD0003461325_2.jpg"
+  },
+  {
+    "id": 3,
+    "titre": "Asus K8v",
+    "image": "https://www.config-gamer.fr/media/k2/galleries/2943/00060014-photo-carte-mere-asus-k8v.jpg"
+  },
+  {
+    "id": 4,
+    "titre": "ASUS P8B75-M LE",
+    "image": "https://media.ldlc.com/ld/products/00/01/05/08/LD0001050880_2.jpg"
+  },
+  {
+    "id": 5,
+    "titre": "ASRock E3C236D4U",
+    "image": "https://media.ldlc.com/ld/products/00/03/46/18/LD0003461887_2.jpg"
+  },
+  {
+    "id": 6,
+    "titre": "Apple iPhone SE 32Go",
+    "image": "https://boulanger.scene7.com/is/image/Boulanger/bfr_overlay?layer=comp&$t1=&$product_id=Boulanger/0190198292230_h_f_l_0"
+  },
+  {
+    "id": 7,
+    "titre": "Smartphone Ordissimo",
+    "image": "http://www.ordissimo.com/698-thickbox_default/smartphone-ordissimo.jpg"
+  },
+  {
+    "id": 8,
+    "titre": "Random Smartphone",
+    "image": "https://media.wired.com/photos/593284aeaef9a462de98365f/master/w_1000,c_limit/2014-09-23-iphone6-gallery-1.jpg"
+  }
+
+]