0

Im trying to extract HTML from a link using the fetch API since the link has authentication. Now I want to extract the HTML into a variable called text. IT WORKS. Now I want to insert the HTML into an iframe which doesnt work inside the .then() block of code. So I would like to use the code in the text variable outside the block and create an iframe. Does anyone know how to do it?

The main objective is to create an iframe with the html content in the data variable. Thanks in advance!!

import React, { Component, PropTypes } from 'react';
import fetch from 'isomorphic-fetch';
let text='';
class TestingContainer extends Component {

  getContent () {
let text='';
    fetch('http://gsspcontent.mybluemix.net/services/alerts.html', {
        method: 'GET',
        headers: {
            'Content-Type': 'text/html',
            'Authorization': 'Basic Z3NzcDphcGlzdHVi'
        }
    })
    .then(function(response) {
        response.text().then(function(text){
        console.log('this is inside and it works', text);
        <iframe srcDoc = {Data} ></iframe>
        });
    });
    console.log('this is outside and it doesnt work', text);
    console.log('this is outside and it doesnt work', this.text);
    console.log('this is outside and it doesnt work', this.props.text);
  }

    render() {

        return (
            <div>
                <div>Testing Page</div>
              {this.getContent()}
              <iframe srcDoc = {this.Data} ></iframe> {/* this doesnt work too */}
            </div>
        );
    }
}

export default TestingContainer;

The console log looks like this 

this is outside and it doesnt work 
testing.component.js?af5d:22 this is outside and it doesnt work undefined
testing.component.js?af5d:23 this is outside and it doesnt work undefined
testing.component.js?af5d:17 this is inside and it works <meta     charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script>

.btn-warning {
background:#8caa0a;
}

</script>

<div class="container">

<div class="row">

<div class="col-md-4">

<p align="center"><font style="font-family:'Open Sans';font-size:32px;line-height:32px;color:#333333; ">Alerts</font></p>
<p align="center"><font style="font-size:20px;line-height:20px;color:#333333;font-weight: 200; ">Be in the know</font></p>


<p align="left"><font style="font-size:14px;line-height:14px;color:#333333; ">Go anywhere and keep connected! Stay on top of your accounts with bill reminders and payment updates sent to your email or mobile device.</font></p>


 <div class="col-sm-6" style="float:left;padding-left:0px;">

<img style="width: 100%;height:100px;" src="metlife_snoopie.png"  alt=“Sample Image">       

 </div>


<div class="col-sm-6" style="float:right;padding-top:50px;">


<a href="#"  style="background:#8caa0a;" class="btn-warning btn-sm" role="button"><font style= "font-family:'Open Sans';font-size:10px;line-    height:12px;">SIGN UP TODAY
        </font></a>

 </div>



</div>


</div>

</div>
Brr Switch
  • 974
  • 1
  • 9
  • 21
  • `fetch()` is asynchronous. – Pointy Feb 29 '16 at 23:00
  • You will have to use the async result inside the `.then()` callback. That's how async operations work in Javascript. So, just put the code into the `.then()` handler to insert the result into an iframe or call another function from inside the `.then()` handler and pass the async result to that function. – jfriend00 Feb 29 '16 at 23:09
  • Hey As I told you, the iframe inside the .then doesnt work. .then(function(response) { response.text().then(function(text){ console.log('this is inside and it works', text); }); }); – Brr Switch Feb 29 '16 at 23:18

0 Answers0