0

So I have the following JavaScript which pulls user data from Facebook:

enter image description here

As you can see in that snippet I have included the line 'console.log(full_name);', which when ran successfully outputs the users full name into the browser console.

Then when I try this:

<script>document.write('Hello, ' + full_name);</script>

It doesn't work. It comes back with Uncaught ReferenceError: full_name is not defined.

I am confused as it is clearly defined & works when using console.log. Someone help?

joan16v
  • 5,055
  • 4
  • 49
  • 49
nulled
  • 383
  • 1
  • 5
  • 20
  • 8
    Please include your code as text, not an image. – joews Nov 11 '15 at 14:27
  • 2
    the variable is in the same scope ? – Kishore Sahasranaman Nov 11 '15 at 14:27
  • 1
    [How to return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) – Andreas Nov 11 '15 at 14:28
  • Not enough to go on here. Where is the document.write line in relation to the rest of this code? – Vincent Ramdhanie Nov 11 '15 at 14:28
  • Declare the variable? –  Nov 11 '15 at 14:29
  • You want to initialize your vars first - i.e. `var full_name = response.name;`. You can also go straight for the response object - i.e. `console.log(response.full_name)` to see if you're getting values from `response`. – bob.mazzo Nov 11 '15 at 14:30
  • Most likely, you are trying to access the variable before the ajax callback function runs. The function is asynchronous (see @Andreas's link). Which means you can't access the variable as soon as you might expect. (This is a very common error, anyway). – Chris Lear Nov 11 '15 at 14:31
  • 1
    @Justin3o9 "_document.write is going to execute once the page is rendered_" It will be executed as soon as the browser hits the script block – Andreas Nov 11 '15 at 14:34

4 Answers4

1
<script>document.write('Hello, ' + full_name);</script>

you don't define the global variable full_name.

binyoyo
  • 11
  • 2
  • I didn't state 'var' inside the function & it wasn't defined before that function so therefore it's already a global variable. Also as you can see I have already chosen the answer that worked for me & you have clearly not read the other replies before posting. – nulled Nov 11 '15 at 15:04
0

It definitely would throw an error.

Assuming that you are including the line

<script>document.write('Hello, ' + full_name);</script>

in the HTML directly, it will be executed much before the call getLoginStatus of fb API completes, which is where you have defined the global variable full_name

Not to mention this is a bad practice (Declaring global variables), but it is.

loxxy
  • 12,990
  • 2
  • 25
  • 56
0

In your example, invoking console.log(full_name) works because it's defined within that code. Referencing full_name in the inline script you specified won't work as it can't access the scope of the callback you pass to getLoginStatus; more specifically, in your example, it will look for full_name on the global object, which is window in the case of the browser. Thus, window.full_name is correctly undefined. In any case, there's also no guarantee that your callback will have been invoked by the time you invoke document.write.

To remedy this, you'll need to call document.write within your callback or store the value elsewhere for later retrieval. As an aside, you should avoid document.write.

Smashing Magazine has an article on JavaScript scope.

James Wright
  • 3,000
  • 1
  • 18
  • 27
  • I would however add a link to document.write(), instead of document.open(), if I referenced this. – durrrr Nov 11 '15 at 14:40
  • That think does state: "Also, an automatic document.open() call happens when document.write() is called after the page has loaded, but that's not defined in the W3C specification.", but I guess I can point to some best practices document. – James Wright Nov 11 '15 at 14:43
0

It seems you are trying to render the name on the page. However, as @Andreas pointed out the document.write is executed as soon as that block is hit, which is before your Facebook API call is returned. Instead, try placing an id on the element you want the name to be rendered in and use getElementById within your callback. Something like this.

FB.api('/me', function(response) {
  document.getElementById('name').innerHTML = response.name;
});

Also, as others have mentioned, you are polluting your global scope with many variables by placing them within your call back without the var keyword.

Castyr
  • 380
  • 3
  • 14
  • Thanks Justin. Just before you posted your reply I had tried this solution myself and it worked, so I will mark your post as being the most helpful. – nulled Nov 11 '15 at 14:55