Encountered an issue with JavaScript while attempting to retrieve mail content from an API and update its read status simultaneously. The error message displayed in the console is:
SyntaxError: Unexpected end of JSON input
at inbox.js:98
The error promise logged is shown below.
1: Promise
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: SyntaxError: Unexpected end of JSON input at http://127.0.0.1:8000/static/mail/inbox.js:98:30
message: "Unexpected end of JSON input"
stack: "SyntaxError: Unexpected end of JSON input\n at http://127.0.0.1:8000/static/mail/inbox.js:98:30"
The code at line #98 is:
let res2 = response[1].json();
The complete JavaScript code is as follows. Upon inspection, it seems that the issue stems from 'res2' since its return value is 'rejected'. Various attempts were made to resolve this without success. Additionally, it is unclear why this error is not caught by the 'catch' function. Thank you for any assistance provided.
Despite receiving a 'SyntaxError', both 'fetch' functions have executed successfully...
async function show_single_mail(email_id){
// Code to display email content
document.querySelector('#mails_table').style.display = 'none';
const email_div = document.createElement('div');
document.querySelector('#emails-view').append(email_div);
// Retrieve email content and update read status concurrently
const option2 = {
method: 'PUT',
body: JSON.stringify({read: true})}
Promise.all([fetch(`/emails/${email_id}`), fetch(`/emails/${email_id}`, option2)])
.then(response => {
let res1 = response[0].json();
let res2 = response[1].json();
console.log([res1, res2]);
return Promise.all([res1, res2])
})
.then(results => {
result = results[0];
email_div.innerHTML =
`<h3>Subject: ${result.subject}</h3><br>` +
`<p>Sender: ${result.sender}</p><br>`+
`<p>Receiver: ${result.recipients}</p><br>`+
`<p>Time: ${result.timestamp}</p><br>`+
`<p>Content: ${result.body}</p>`;
})
.catch(err => console.log(err))
}