Using Fetch to update a div with json from server

Question

I'm creating a website in which the user can click buttons to retrieve information from the server which will then appear on the page.

Clicking on this button sends a request for the data. Looking at developer tools, I can see the request is successful however my code isn't doing anything with the response.

  
  let response = fetch('http://127.0.0.1:3000/dylan/list', { mode: 'no-cors' })
    .then(console.log("fetch sent"))
    //console.log(response))
    .then(response => {
      return response.text()
      console.log("response")
    }).then(text => {
       document.getElementById("folk").append(text)
       console.log("response2")})

"folk" is a list that I want the response data to be added to. I think theres probably something wrong at or after the 5th line. Any help would be appreciated.

what did u got when u console.log ur **response.text** ? – mmh4all Mar 29 '22 at 11:49 — mmh4all, Mar 29 '22 at 11:49

score -1 · Answer 1 · answered Mar 29 '22 at 11:55

-1

This is how it should looks like

let response = fetch('http://127.0.0.1:3000/dylan/list', { mode: 'no-cors' })
.then(console.log("fetch sent"))
.then(response => {
  return response.text().then(text => {
    document.getElementById("folk").append(text)
  });
});

more details can be found on https://developer.mozilla.org/en-US/docs/Web/API/Response/text

answered Mar 29 '22 at 11:55

mmh4all

388
11

No. `{ mode: 'no-cors' }` will prevent the response body from being read. Changing other things won't help. – Quentin Mar 30 '22 at 08:45
And you've introduced the [nested promise anti-pattern](https://javascript.plainenglish.io/nested-promise-an-anti-pattern-alternative-to-it-a5069923a2ec). Don't do that. – Quentin Mar 30 '22 at 08:46

Using Fetch to update a div with json from server

1 Answers1