这是我的存储库:https://github.com/Fluckerbust/quoteAPI
本质上,它要求我建立一个帖子请求来推送报价和来自新报价页面的人。
我能够控制台记录这些值,没问题,但是当将它们推送到数组时,它会推送 2 个未定义的值。 截屏: https://prnt.sc/FNoxbVaX4Kab 我已经尝试了很多方法来让它通过,但它拒绝推送除未定义之外的任何内容。我假设这是某种语法错误,没有正确调用值或推送设置不正确。
(我编码的)Server.js:
app.post('/api/quotes', (req, res, next) => {
const quote = req.query.quote
const person = req.query.person
const newQuoteAdd = {quote:quote, person:person}
function pushQuote (quoteText, attribution) {
quotes.push({quote:quoteText, person:attribution});
}
if(quote && person){
console.log(quote)
console.log(person)
console.log(quote, person)
pushQuote({quote, person});
res.status(201).send({quote:quote, person:person});
} else {
res.status(400).send("There was an error processing the request. Please try again.")
}
});
(为项目预编码)add-quote.js:
const submitButton = document.getElementById('submit-quote');
const newQuoteContainer = document.getElementById('new-quote');
submitButton.addEventListener('click', () => {
const quote = document.getElementById('quote').value;
const person = document.getElementById('person').value;
fetch(`/api/quotes?quote=${quote}&person=${person}`, {
method: 'POST',
})
.then(response => response.json())
.then(({quote}) => {
const newQuote = document.createElement('div');
newQuote.innerHTML = `
<h3>Congrats, your quote was added!</h3>
<div class="quote-text">${quote.quote}</div>
<div class="attribution">- ${quote.person}</div>
<p>Go to the <a href="index.html">home page</a> to request and view all quotes.</p>
`
newQuoteContainer.appendChild(newQuote);
});
});
我尝试过 {quote, person}、{[quote, person]}、{quote:quote, person:person} 的不同变体以及各种其他表达这些价值观并试图推动这些价值观的方式。它应该接受输入到报价文本和人员输入中的任何内容,然后获取这些值并将它们推送到一个已经存在的数组中。相反,它从值中返回未定义。即使 console.log 显示的值很好。 以下是我认为有问题的代码。
function pushQuote (quoteText, attribution) {
quotes.push({quote:quoteText, person:attribution});
}
pushQuote({quote, person});
res.status(201).send({quote:quote, person:person});