ch[#161861252] Connect products to api

ebenezerdon · Nov 10, 2018 · fdb9781 · fdb9781
1 parent afba8f4
commit fdb9781
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 13 deletions.
diff --git a/UI/assets/js/products.js b/UI/assets/js/products.js
@@ -1,15 +1,32 @@
-getProducts = () => {
-  const options = {
-    headers: new Headers({
+const getProducts = () => {
+  fetch('https://newstoremanager.herokuapp.com/api/v1/products', {
+    headers: {
       'Content-Type': 'application/json',
-      'accessstoken': localStorage.accesstoken,
-    }),
-  };
-  fetch('https://newstoremanager.herokuapp.com/api/v1/products', options)
+      accesstoken: localStorage.accesstoken,
+    },
+  })
     .then(res => res.json())
     .then((data) => {
-      let output = '<h2>Products</h2>';
-      console.log(data);
+      let output = null;
+      data.forEach((user) => {
+        console.log(user.productimage);
+        output += `
+          <div class='product'>
+            <div class = 'product-item hover-effect'>
+              <a href="product-item.html">
+                <img src=${user.productimage} width='300'>
+              </a>
+              <a href='product-item.html'>
+                <p>${user.productname}</p>
+                <p>${user.price}</p>
+              </a>
+              <button>Add to cart</button>
+            <div>
+          </div>
+        `;
+      });
+      document.getElementById('products-list').innerHTML = output;
     });
-  console.log(localStorage.accesstoken);
 };
+
+/* document.getElementById('products-list').addEventListener('mouseover', getProducts); */
diff --git a/UI/pages/products.html b/UI/pages/products.html
@@ -13,7 +13,7 @@
   <script src="main.js"></script>
 </head>
 
-<body>
+<body onload="getProducts()">
   <header>
     <div class="top-nav">
       <div class="logo">
@@ -44,9 +44,10 @@
       </div>
     </div>
   </header>
-  <div class='row'>
+
+  <div class='row' id="products-list">
     <div class='product'>
-      <div class='product-item hover-effect'> <a href="product-item.html"></a>
+      <div class='product-item hover-effect'>
         <a href="product-item.html">
           <img src='https://ng.jumia.is/8OQU5DiXVftEqmGAcFd62dHs9T8=/fit-in/680x680/filters:fill(white):sharpen(1,0,false):quality(100)/product/18/08299/1.jpg?3454'
             width='300'>
@@ -138,6 +139,7 @@
     <div class="footer"></div>
   </div>
 
+  <script type="text/javascript" src="../assets/js/products.js"></script>
 
 </body>