lundi 3 août 2020

Quite new to Node JS and I am trying to post to a specific request but it get me error

** hello iam beginner in node js and I have a function that fetches data :**

let a = showbtn.addEventListener('click',function(){
    list.innerHTML='';
    fetch('http://localhost:3000/products')
                                      .then ((response)=>response.json())
                                      .then((data)=>{
                                                                          
                                                                                                                          
                                          
                                          data.forEach((product)=>{
                                                                                      
                                              let li =document.createElement('li');
                                              li.textContent=` ${product.id} - ${product.name} - $ ${product.price} `;
                                              list.appendChild(li);
                                          });
                                        })
                                      

})

and also in my app.js i have this code:

let express=require('express');
app=express();
//after completing index.html we set index.html as a home page like this by introducing public client folder:
app.use(express.static('public'));
productsArray=[];
//every products must have an id number:
let id=1;
app.use(express.json());

//showing all products:
app.get('/products',(req,res)=>{
    res.send(productsArray);
    

})
//creating ptoducts(posts):
app.post('/products',(req,res)=>{
    let newProduct=req.body;
    newProduct.id=id;
    id++;
    productsArray.push(newProduct);
    res.send('new product created by newProduct=req.body and added to array by push method: Array.push(newProduct)')

    
})

and in my html i have this code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shop</title>
</head>
<body>
    <h1>shop</h1>
    <h2>show all products</h2>
    <button class="show-products">show</button>
    <!-- //everyl ist item is a separate product -->
    <ul class="product-list"></ul>

<!-- //.................................................................... -->
    <h2>add product</h2>
    <form  class="add-product-form">

    <p>
        <label for="add-product-name">
            product:
         
        </label>
        <input id="add-product-name" type="text" >
    </p>


    <p>
        <label for="add-product-price">
            price:
         
        </label>
        <input id="add-product-price" type="text"  >
    </p>
 
    <button>add</button>

    </form>
<script src="js/script.js"></script>
</body>
</html>

The problem is that when i open chrome on localhost:3000 anf type something in the field of products and price after that i click show button but i get this result something like this : 1 - undefined - $ undefined the first one is it's id and the second is product name but is undefined and price as well i thing something is wrong with value but i can't solve this problem thank you in advance.




Aucun commentaire:

Enregistrer un commentaire