Совершенно новый для Node JS, и я пытаюсь отправить по запросу c, но он вызывает ошибку - PullRequest
Новая
       11

Совершенно новый для Node JS, и я пытаюсь отправить по запросу c, но он вызывает ошибку

0 голосов
/ 03 августа 2020

Это моя функция для получения данных: 

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);
         });
      })
})

Мое приложение. js выглядит так: 

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)')

    
})

Это мой HTML файл: 

<!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>

Проблема в том, что когда я открываю chrome на localhost: 3000 и набираю что-то в поле продуктов и цены, после этого я нажимаю кнопку «Показать», но получаю примерно такой результат: 

1 - undefined - $ undefined

первая - это идентификатор, а вторая - название продукта, но не определена и цена. Я думаю, что что-то не так со стоимостью, но я не могу решить эту проблему.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 05 августа 2020

в файле js удалите точку с запятой и замените ее запятой

0 голосов
/ 03 августа 2020

При обработке тел POST в express вам нужен пользователь body-parser

http://expressjs.com/en/resources/middleware/body-parser.html

npm install body-parser

var bodyParser = require('body-parser')

Код из документов 

var express = require('express')
var bodyParser = require('body-parser')

var app = express()

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())
...