No puedo averiguar dónde poner las llaves o paréntesis para que funcione correctamente. Al principio pensé que el servidor estaba inactivo o algo así, pero luego logré registrar los datos en la consola. Seguí desinstalando y reinstalando esta extensión de código de Visual Studio llamada "Bracket Colorizer" para tratar de resolver el problema, pero me quedé sin energía.
document.addEventListener('DOMContentLoaded', () => { const title = document.createElement('h1'); title.innerText = 'Online Chatroom'; document.querySelector('body').appendChild(title); // make AJAX call here.... fetch('https://curriculum-api.codesmith.io/messages') .then(data => data.json()) .then(data => { const main = document.querySelector('main') for (let i = 0; i < data.length; i++) { writeHTML(data[i], main) // console.log(data); }); }; };Aquí está el resto del código en el que mi tutor de wyzant y yo trabajamos juntos si ayuda.
document.querySelector('form').addEventListener('submit', sendMessage) function writeHTML(message, htmlNode) { let messageContainer = document.createElement('div') let messageText = document.createElement('p') messageText.innerHTML = message.message messageContainer.appendChild(messageText) let messageTime = document.createElement('span') messageTime.classList.add('time') messageTime.innerText = message.created_at messageContainer.appendChild(messageTime) linebreak = document.createElement("br"); messageContainer.appendChild(linebreak); // // document.innerHTML(<br>) let createdBy = document.createElement('span') createdBy.classList.add('message_sender') createdBy.innerText = message.created_by messageContainer.appendChild(createdBy) htmlNode.appendChild(messageContainer) } function sendMessage(event) { event.preventDefault() let newMessage = document.querySelector('textarea').value let data = { message: newMessage, //figure out how to add another text box and insert that data here created_by: "Matthew", created_at: Date.now() } fetch('https://curriculum-api.codesmith.io/messages', { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } }).then(function(response){ return response.json() }) .then(function(response){ const main = document.querySelector('main') writeHTML(response[0], main) }) .catch(function(error){ console.error(error) }) };Este paréntesis está fuera de lugar:
// console.log(data); }); <-- this one }; // console.log(data); } }); <-- should be hereTenía dos paréntesis fuera de lugar, puede verificar con el siguiente código:
document.addEventListener('DOMContentLoaded', () => { const title = document.createElement('h1'); title.innerText = 'Online Chatroom'; document.querySelector('body').appendChild(title); // make AJAX call here.... fetch('https://curriculum-api.codesmith.io/messages') .then(data => data.json()) .then(data => { const main = document.querySelector('main') for (let i = 0; i < data.length; i++) { writeHTML(data[i], main) // console.log(data); } }) })