I am trying to make an AJAX fetch request and I keep getting an error "Uncaught SyntaxError: Un-CodePudding

I can't figure out where to put the curly brackets or parenthesis to make it work correctly. At first I thought the server was down or something but then I managed to console log the data. I kept uninstalling and reinstalling this visual studio code extension called "Bracket Colorizer" to try and solve the but I am all out of juice.

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

Here is the rest of the code me and my tutor from wyzant worked on together if it helps.

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

CodePudding user response：

This parenthesis is misplaced:

  // console.log(data);
  }); <-- this one
};


  // console.log(data);
  }
}); <-- should be here

CodePudding user response：

You had two parenthesis misplaced, you can check with the code below:

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