title: Quite new to Node JS and I am trying to post to a specific request but it get me error
body: <p>This is my function to fetch data:</p>
  <pre><code>let a = showbtn.addEventListener('click',function(){
      list.innerHTML='';
      fetch('http://localhost:3000/products')
        .then ( response =&gt;response.json())
        .then( data =&gt; {
           data.forEach( product =&gt; {
              let li =document.createElement('li');
              li.textContent=` ${product.id} - ${product.name} - $ ${product.price} `;
              list.appendChild(li);
           });
        })
  })
  </code></pre>
  <p>My App.js looks like this:</p>
  <pre><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)=&gt;{
      res.send(productsArray);
      
  
  })
  //creating ptoducts(posts):
  app.post('/products',(req,res)=&gt;{
      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)')
  
      
  })
  </code></pre>
  <p>This is my HTML file:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;shop&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;shop&lt;/h1&gt;
      &lt;h2&gt;show all products&lt;/h2&gt;
      &lt;button class=&quot;show-products&quot;&gt;show&lt;/button&gt;
      &lt;!-- //everyl ist item is a separate product --&gt;
      &lt;ul class=&quot;product-list&quot;&gt;&lt;/ul&gt;
  
  &lt;!-- //.................................................................... --&gt;
      &lt;h2&gt;add product&lt;/h2&gt;
      &lt;form  class=&quot;add-product-form&quot;&gt;
  
      &lt;p&gt;
          &lt;label for=&quot;add-product-name&quot;&gt;
              product:
           
          &lt;/label&gt;
          &lt;input id=&quot;add-product-name&quot; type=&quot;text&quot; &gt;
      &lt;/p&gt;
  
  
      &lt;p&gt;
          &lt;label for=&quot;add-product-price&quot;&gt;
              price:
           
          &lt;/label&gt;
          &lt;input id=&quot;add-product-price&quot; type=&quot;text&quot;  &gt;
      &lt;/p&gt;
   
      &lt;button&gt;add&lt;/button&gt;
  
      &lt;/form&gt;
  &lt;script src=&quot;js/script.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The problem is that when i open chrome on localhost:3000 and type something in the field of products and price after that i  click show button but i get this result something like this:</p>
  <pre><code>1 - undefined - $ undefined
  </code></pre>
  <p>the first one is it's id and the second is product name but is undefined and price as well. I think something is wrong with value but i can't solve this problem.</p>
  <p>Thank you in advance.</p>