javascript - How can I use fetch API to populate a DIV?

I am trying to fetch the html of a page (once I can get this working I will be fetching a specific Div in the requested page) then print this page in to my id="data" div. I can see the information coming through in the promise but I am unable to access that information.

const proxyurl = "/";
const url = ""; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // ://example
  .then(response => response)
  .then(data => {
    console.log(data.text());
    return document.getElementById('data').innerHTML = data.text();
  })
  .catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));

<div id='data'></div>

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://www.booking.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
  .then(response => response)
  .then(data => {
    console.log(data.text());
    return document.getElementById('data').innerHTML = data.text();
  })
  .catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));

<div id='data'></div>

Share Improve this question edited Mar 8, 2019 at 6:41 mplungjan 178k28 gold badges180 silver badges240 bronze badges asked Mar 8, 2019 at 6:24 Tom Dickson 6221 gold badge10 silver badges22 bronze badges

.then(response => response.text()) .then(data => { document.getElementById('data').innerHTML = data; }) – mplungjan Commented Mar 8, 2019 at 6:55

Add a comment |

2 Answers 2

Sorted by: Reset to default 16

The .text() method you invoke on response body returns a promise. So the proper way to access it would be through the promise chain.

As per the documentation:

The text() method of the Body mixin takes a Response stream and reads it to completion. It returns a promise that resolves with a USVString object (text).

Here's how your updated snippet should look like:

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://www.booking.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
  .then(response => response.text())  
.then(html => {
  // console.log(html);
  document.getElementById('data').innerHTML = html;
})
.catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));

<html>
    <body>
       <div id='data'>
      </div>
      
    </body>
</html>

The text() or json() can be called only once. In your code, you're calling it twice. So the console.log gives you the data and the next time when you call data.text(), the result is empty.

You could do it as below

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://www.booking.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
  .then(response => response)
  .then(data => {
    const resData = data.text();
    console.log(resData);
    document.getElementById('data').innerHTML = resData;
  })
  .catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));

<div id="data"></div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How can I use fetch API to populate a DIV? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)