У меня проблема с примером проекта для онлайн-курса, который я беру. Когда я go to / fakeAnimalData, я получаю элементы animal and fact для отображения в теле HTML и в моем терминале (но не в консоли, где он должен появляться - почему он не появляется?) и затем, когда я go в / addAnimal, после отправки формы я вижу fav в теле HTML (но не в консоли - почему он не появляется?), но моя большая проблема заключается в том, что в объекте, возвращаемом в терминал, животное и факт не определены. Кроме того, по какой-то причине факт отображается в виде фактов - почему это так?
Цель состоит в том, чтобы получить данные из / fakeAnimalData для отображения в объекте, возвращенном в терминале из / addAnimal, поэтому я получаю все три элемента вернулись и заселены - животные, факты и фавориты. Я хочу, чтобы объект возвращался в терминале И на консоли, но сейчас объект возвращается только в терминале.
Что я делаю не так? Это мой код:
сервер. js:
projectData = {};
/* Express to run server and routes */
const express = require('express');
/* Start up an instance of app */
const app = express();
/* Dependencies */
const bodyParser = require('body-parser')
/* Middleware*/
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
const cors = require('cors');
app.use(cors());
/* Initialize the main project folder*/
app.use(express.static('project1'));
const port = 8000;
/* Spin up the server*/
const server = app.listen(port, listening);
function listening(){
// console.log(server);
console.log(`running on localhost: ${port}`);
};
// GET route
const animalData = [];
const fakeData = {animal: "lion", fact: "a lion's roar can be heard five miles away"};
app.get('/fakeAnimalData', getFakeData);
function getFakeData(req, res) {
res.send(fakeData)
console.log(fakeData)
};
app.get('/all', getData);
function getData(req, res){
res.send(animalData)
console.log(animalData)
}
// function sendData (request, response) {
// response.send(projectData);
// };
// POST route
app.post('/add', callBack);
function callBack(req,res){
res.send('POST received');
}
// POST an animal
const data = [];
// TODO-Call Function
app.route('/addAnimal')
.get(function (req, res) {
res.sendFile('index.html', {root: 'project1'})
})
.post(addAnimal)
function addAnimal(req, res){
newEntry = {
animal: req.body.animal,
facts: req.body.fact,
fav: req.body.fav
}
data.push(req.body);
// res.status(200).send(req.body);
animalData.push(newEntry)
res.send(animalData)
console.log(animalData)
};
app. js:
function performActuion(e){
const fav = document.getElementById('fav').value;
const getAnimal = async (url) =>{
const res = await fetch(url);
try {
const data = await res.json();
console.log(data)
return data;
} catch(error) {
console.log()
}
};
/* Function to POST data */
const postData = async ( url = '', data = {})=>{
console.log(data);
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data), // body data type must match "Content-Type" header
});
try {
const newData = await response.json();
console.log(newData);
// console.log(newData);
return newData.json()
console.log(await response.json());
return await response.json()
}catch(error) {
console.log("error", error);
// appropriately handle the error
};
};
// TODO-Call Function
getAnimal('/fakeAnimalData')
.then(async function(data){
console.log(data);
let res = await postData('/addAnimal', {animal: data.animal, fact: data.fact, fav: fav});
console.log(res);
});
};
Любая помощь будет принята с благодарностью.
Спасибо, Майк
РЕДАКТИРОВАТЬ:
Я думаю, проблема в том, что эта часть кода не работает:
getAnimal('/fakeAnimalData')
.then(async function(data){
console.log(data);
let res = await postData('/addAnimal', {animal: data.animal, fact: data.fact, fav: fav});
console.log(res);
});
};
/ fakeAnimalData возвращает { "animal": "lion", "fact": "рев льва слышен на расстоянии пяти миль"} (но только в теле HTML, а не в консоли), и я хочу, чтобы приведенный выше код работал в в сочетании с приведенным ниже кодом для передачи данных из / fakeAnimalData в данные, которые возвращаются, когда я отправляю форму в / addAnimal, поэтому возвращаемым объектом является {"animal": "lion", "fact": "рев льва может быть услышанным в пяти милях "," fav ":" данные, возвращаемые из формы "}. Весь смысл в том, чтобы имитировать вызов API из внешнего API.
function performActuion(e){
const fav = document.getElementById('fav').value;
const getAnimal = async (url) =>{
const res = await fetch(url);
try {
const data = await res.json();
console.log(data)
return data;
} catch(error) {
console.log()
}
};
РЕДАКТИРОВАТЬ 2:
Я все ближе. У меня был кусок кода в неправильном месте. Теперь, когда я отправляю код, я получаю, что все три элемента объекта появляются в теле HTML, но когда я смотрю в терминал, я все еще вижу животное и факт как неопределенные, хотя эти элементы действительно появляются в результате тело htmL. приложение. js теперь выглядит так:
function performActuion(e){
const fav = document.getElementById('fav').value;
getAnimal('/fakeAnimalData')
.then(async function(data){
console.log(data);
let res = await postData('/addAnimal', {animal: data.animal, fact: data.fact, fav: fav});
console.log(res);
});
};
const getAnimal = async (url) =>{
const res = await fetch(url);
try {
const data = await res.json();
console.log(data)
return data;
} catch(error) {
console.log()
}
};
/* Function to POST data */
const postData = async ( url = '', data = {})=>{
console.log(data);
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data), // body data type must match "Content-Type" header
});
try {
const newData = await response.json();
console.log(newData);
// console.log(newData);
return newData.json()
console.log(await response.json());
return await response.json()
}catch(error) {
console.log("error", error);
// appropriately handle the error
};
};
// TODO-Call Function
getAnimal('/fakeAnimalData')
.then(async function(data){
console.log(data);
let res = await postData('/addAnimal', {animal: data.animal, fact: data.fact, fav: fav});
console.log(res);
});
Я чувствую, что я близко, но еще не совсем там.
РЕДАКТИРОВАТЬ 3:
Я думаю, что проблема с этим кодом. Он не возвращает все данные, которые передаются в функцию:
const postData = async ( url = '', data = {})=>{
console.log(data);
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data), // body data type must match "Content-Type" header
});
try {
const newData = await response.json();
console.log(newData);
// console.log(newData);
return newData
console.log(await response.json());
return await response.json()
}catch(error) {
console.log("error", error);
// appropriately handle the error
};
};