Ggtcf

MAXDOP Settings for SQL Server 2014

Engineer refusing to file/disclose patents

How will losing mobility of one hand affect my career as a programmer?

Flux received by a negative charge

About a little hole in Z'ha'dum

Is it possible to have a strip of cold climate in the middle of a planet?

How can Trident be so inexpensive? Will it orbit Triton or just do a (slow) flyby?

How much character growth crosses the line into breaking the character

Does the Mind Blank spell prevent the target from being frightened?

Is a model fitted to data or is data fitted to a model?

Journal losing indexing services

Why is Arduino resetting while driving motors?

How do I extrude a face to a single vertex

Is there a word to describe the feeling of being transfixed out of horror?

How must one send away the mother bird?

Drawing a topological "handle" with Tikz

Will adding a BY-SA image to a blog post make the entire post BY-SA?

What (else) happened July 1st 1858 in London?

A social experiment. What is the worst that can happen?

Are lightweight LN wallets vulnerable to transaction withholding?

Customize circled numbers

Is it possible to use .desktop files to open local pdf files on specific pages with a browser?

Could solar power be utilized and substitute coal in the 19th Century

Can the Supreme Court overturn an impeachment?

How can I use fetch API to populate a DIV?

How do JavaScript closures work?How to horizontally center a <div>?How do I check if an element is hidden in jQuery?How do I remove a property from a JavaScript object?How to make div not larger than its contents?How do I redirect to another webpage?How to disable text selection highlighting?How to make a div 100% height of the browser window?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?

4

1

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 = "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>

javascript html css fetch

share|improve this question

edited Mar 8 at 6:41

mplungjan

89.7k22127184

asked Mar 8 at 6:24

Tom DicksonTom Dickson

1418

• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  

add a comment | 

4

1

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 = "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>

javascript html css fetch

share|improve this question

edited Mar 8 at 6:41

mplungjan

89.7k22127184

asked Mar 8 at 6:24

Tom DicksonTom Dickson

1418

• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  

add a comment | 

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 = "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>

javascript html css fetch

share|improve this question

edited Mar 8 at 6:41

mplungjan

89.7k22127184

asked Mar 8 at 6:24

Tom DicksonTom Dickson

1418

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>

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>

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 at 6:41

mplungjan

89.7k22127184

asked Mar 8 at 6:24

Tom DicksonTom Dickson

1418

share|improve this question

edited Mar 8 at 6:41

mplungjan

89.7k22127184

asked Mar 8 at 6:24

Tom DicksonTom Dickson

1418

edited Mar 8 at 6:41

mplungjan

89.7k22127184

edited Mar 8 at 6:41

mplungjan

89.7k22127184

asked Mar 8 at 6:24

Tom DicksonTom Dickson

1418

asked Mar 8 at 6:24

Tom DicksonTom Dickson

1418

2 Answers
2

active

oldest

votes

5

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>

share|improve this answer

edited Mar 8 at 6:45

answered Mar 8 at 6:40

NisargNisarg

11.2k52341

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @mplungjan ah, didn't even notice the return there! Updated
  
  – Nisarg
  Mar 8 at 6:45
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  But your code works :) That is important
  
  – mplungjan
  Mar 8 at 6:45
  
  

  
  
  
  

add a comment | 

0

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>

share|improve this answer

edited Mar 8 at 6:45

answered Mar 8 at 6:36

Ashwin ValentoAshwin Valento

1677

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Let me know if this solved your problem.
  
  – Ashwin Valento
  Mar 8 at 6:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Still shows a promise object. And why return the result of an innerHTML assignement? return document.getElementById('data').innerHTML = resData;
  
  – mplungjan
  Mar 8 at 6:42
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  return is not required.
  
  – Ashwin Valento
  Mar 8 at 6:44
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Your code still does not work as expected.
  
  – mplungjan
  Mar 8 at 6:44
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The main issue is that you cant use the text() or json() only once. What i'm doing is assigning to a variable and then accessing the variable. as simple as that.
  
  – Ashwin Valento
  Mar 8 at 6:48
  

  
  
  
  

 | 
show 1 more comment

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55057801%2fhow-can-i-use-fetch-api-to-populate-a-div%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

5

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>

share|improve this answer

edited Mar 8 at 6:45

answered Mar 8 at 6:40

NisargNisarg

11.2k52341

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @mplungjan ah, didn't even notice the return there! Updated
  
  – Nisarg
  Mar 8 at 6:45
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  But your code works :) That is important
  
  – mplungjan
  Mar 8 at 6:45
  
  

  
  
  
  

add a comment | 

5

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>

share|improve this answer

edited Mar 8 at 6:45

answered Mar 8 at 6:40

NisargNisarg

11.2k52341

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @mplungjan ah, didn't even notice the return there! Updated
  
  – Nisarg
  Mar 8 at 6:45
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  But your code works :) That is important
  
  – mplungjan
  Mar 8 at 6:45
  
  

  
  
  
  

add a comment | 

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>

share|improve this answer

edited Mar 8 at 6:45

answered Mar 8 at 6:40

NisargNisarg

11.2k52341

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>

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>

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>

share|improve this answer

edited Mar 8 at 6:45

answered Mar 8 at 6:40

NisargNisarg

11.2k52341

answered Mar 8 at 6:40

NisargNisarg

11.2k52341

answered Mar 8 at 6:40

NisargNisarg

11.2k52341

0

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>

share|improve this answer

edited Mar 8 at 6:45

answered Mar 8 at 6:36

Ashwin ValentoAshwin Valento

1677

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Let me know if this solved your problem.
  
  – Ashwin Valento
  Mar 8 at 6:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Still shows a promise object. And why return the result of an innerHTML assignement? return document.getElementById('data').innerHTML = resData;
  
  – mplungjan
  Mar 8 at 6:42
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  return is not required.
  
  – Ashwin Valento
  Mar 8 at 6:44
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Your code still does not work as expected.
  
  – mplungjan
  Mar 8 at 6:44
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The main issue is that you cant use the text() or json() only once. What i'm doing is assigning to a variable and then accessing the variable. as simple as that.
  
  – Ashwin Valento
  Mar 8 at 6:48
  

  
  
  
  

 | 
show 1 more comment

0

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>

share|improve this answer

edited Mar 8 at 6:45

answered Mar 8 at 6:36

Ashwin ValentoAshwin Valento

1677

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Let me know if this solved your problem.
  
  – Ashwin Valento
  Mar 8 at 6:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Still shows a promise object. And why return the result of an innerHTML assignement? return document.getElementById('data').innerHTML = resData;
  
  – mplungjan
  Mar 8 at 6:42
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  return is not required.
  
  – Ashwin Valento
  Mar 8 at 6:44
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Your code still does not work as expected.
  
  – mplungjan
  Mar 8 at 6:44
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The main issue is that you cant use the text() or json() only once. What i'm doing is assigning to a variable and then accessing the variable. as simple as that.
  
  – Ashwin Valento
  Mar 8 at 6:48
  

  
  
  
  

 | 
show 1 more comment

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>

share|improve this answer

edited Mar 8 at 6:45

answered Mar 8 at 6:36

Ashwin ValentoAshwin Valento

1677

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>

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>

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>

share|improve this answer

edited Mar 8 at 6:45

answered Mar 8 at 6:36

Ashwin ValentoAshwin Valento

1677

answered Mar 8 at 6:36

Ashwin ValentoAshwin Valento

1677

answered Mar 8 at 6:36

Ashwin ValentoAshwin Valento

1677