如何将javascript函数中返回的JSON保存为变量？

Question

Im trying to save the client IP address in a variable after retrieving it in JSON form from api.ipify.org. I can get the IP to show if I alert the result but cannot get it to save in a variable for some reason.

This works:

<script>

function getIP(json) {
    alert(json.ip);
}

</script>
<script src="https://api.ipify.org?format=jsonp&callback=getIP"></script>

But this does not work:

<script>

var clientIP = ''

function getIP(json) {
    clientIP = json.ip;
    return clientIP;
}

alert(clientIP);

</script>
<script src="https://api.ipify.org?format=jsonp&callback=getIP"></script>

I would like to be able to store the data in a variable so that I can attach it to an embed that will add it into its automated webhook POST.

<!-- begin video recorder code --><script type="text/javascript">
var IPADDRESSVARIABLE = 'SOME_IP_ADDRESS'
var size = {width:400,height:330};
var flashvars = {qualityurl: "avq/300p.xml",accountHash:"BUNCHOFRANDOMSTUFF", eid:2, showMenu:"true", mrt:120,sis:0,asv:1,mv:0, payload: IPADDRESSVARIABLE};
(function() {var pipe = document.createElement('script'); pipe.type = 'text/javascript'; pipe.async = true;pipe.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 's1.addpipe.com/1.3/pipe.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(pipe, s);})();
</script>
<div id="hdfvr-content"> </div>
<!-- end video recorder code -->

If I can get the IP address saved as a global variable then I can pass it into the 'payload' key of the 'flash vars'.

Answer 1

Your alert won't work because your code is not executing synchronously, getIP doesn't get called until after your alert statement. You need to trigger any functionality that depends on clientIP inside your getIP function. Here is an example:

 function getIP(json) { var event = new CustomEvent('iploaded', { detail: json.ip }); document.dispatchEvent(event); } document.addEventListener('iploaded', function(event) { var IPADDRESSVARIABLE = event.detail; var size = {width:400,height:330}; var flashvars = {qualityurl: "avq/300p.xml",accountHash:"BUNCHOFRANDOMSTUFF", eid:2, showMenu:"true", mrt:120,sis:0,asv:1,mv:0, payload: IPADDRESSVARIABLE}; (function() {var pipe = document.createElement('script'); pipe.type = 'text/javascript'; pipe.async = true;pipe.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 's1.addpipe.com/1.3/pipe.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(pipe, s);})(); }); // simulate jsonp callback getIP({ ip: '127.0.0.1' }); 

Also, no need to return in getIP

Answer 2

The second code example does not work because the variable is only given a value inside of a callback function, which means the alert,which runs synchronously, runs as soon as the javascript interpreter starts reading and running the code line by line, but the getIP function is only called later on when the jsonp request returns a response. Your first code example was the right way to go.

Answer 3

As Rob says, you're expecting the code to run synchronously but that isn't the case.

Here's a small edit of your code snippet that will work, basically I've wrapped the alert in a function, I then call that function once the getIP function has finished executing.

<script>

var clientIP = ''

function getIP(json) {
    clientIP = json.ip;
    alertClientIp();
}

function alertClientIp () {
    alert(clientIP);
}

</script>

The code design of the above snippet is a bit nasty, if you only need to use the client IP once, then don't bother storing it as a variable, just pass it to the function which executes you "automated webhook POST" logic.

<script>

    function getIP(json) {
        clientIP = json.ip;
        alertClientIp();
    }

    //Accept the client_ip as a param
    function webhookLogic (client_ip) {

       //Execute your logic with the client_ip, 
       //for simplicity I'll stick to your alert.

       alert(client_ip);
    }

    </script>

With regards to your edit

It looks like you have the two sets of logic placed in two separate script elements, could you not merge them into one?

<script>

    function getIP(json) {
        clientIP = json.ip;
        alertClientIp();
    }

    //Accept the client_ip as a param
    function webhookLogic (client_ip) {

       //Execute your logic with the client_ip, 
       //for simplicity i'll stick to your alert.

       //Trigger your video wrapper code, unsure if 
       //if this method of execution will break your app...
       videoWrapper(client_ip);
    }

     //Your video code from your latest edit
    function videoWrapper (client_ip) {
        var IPADDRESSVARIABLE = client_ip;
        var size = {width:400,height:330};
        var flashvars = {qualityurl: "avq/300p.xml",accountHash:"BUNCHOFRANDOMSTUFF", eid:2, showMenu:"true", mrt:120,sis:0,asv:1,mv:0, payload: IPADDRESSVARIABLE};
    (function() {var pipe = document.createElement('script'); pipe.type = 'text/javascript'; pipe.async = true;pipe.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 's1.addpipe.com/1.3/pipe.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(pipe, s);})();
   }
    </script>

If that chain of execution breaks your app then I think you need to go back to the drawing board with regards to the composition of your question, it's clear what you want to do but your question lacks a bit of meta-data as to how this logic all "fits together".

Answer 4

Try this :

 function getIP(json) { return json.ip; } var json = { "ip": "111.22.33.44"} var clientIP = getIP(json); alert(clientIP); 

Answer 5

I found a workaround! I stored the result of the IP function into a hidden div to act as a container. I then declared a variable inside the embed code and set it to the innerHMTL. It may not be the most elegant but it does exactly what I want it to!

//hidden container to store the client IP address
<div id = 'ipContainer' style='display:none'></div>

//function to retrieve the client IP address
<script>
function getIP(json) {
    document.getElementById('ipContainer').innerHTML = json.ip;
}
</script>

//shortened version of the URL that returns the IP
<script src='http://www.api.ipify.org'><script>


//embed code for the video recorder
<script>
<!-- begin video recorder code --><script type="text/javascript">
var clientIP = document.getElementById('ipContainer').innerHTML;
var size = {width:400,height:330};


//I passed the clientIP variable into the payload element of the flashvars object
var flashvars = {qualityurl: "avq/300p.xml",accountHash:"RANDOM ACCOUNT HASH", eid:2, showMenu:"true", mrt:120,sis:0,asv:1,mv:0, payload:clientIP}; //Here i passed the clientIP which is nor stored as a variable
(function() {var pipe = document.createElement('script'); pipe.type = 'text/javascript'; pipe.async = true;pipe.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 's1.addpipe.com/1.3/pipe.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(pipe, s);})();
</script>
<div id="hdfvr-content"> </div>
<!-- end video recorder code -->