1

I am working on web ui project based on this project. Now what I want to do is that when a user opens the webpage, the ip address of the device from which this page is opened should be returned. For this I added the below code to the javascript` code here:

    function myIP() {
      $.getJSON("//freegeoip.net/json/?callback=?", function(data) {
        const ipInformation = JSON.parse(data);
        console.log(ipInformation.ip);
        return ipInformation.ip;
      });
    }

const sessionAttr = myIP();

I also added <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> at the top of the same javascript code file. Now sessionAttr constant is called at line 60 of this code file (Note that I changed sessionAttributes: config.lex.sessionAttributes to sessionAttributes: config.sessionAttr).

When I try to load this page nothing shows up. if I do not make changes I described above then the page loads up correctly. So somehow I am making some mistake in my additions which is screwing this page.

NOTE: I am not at all familiar with JavaScript but based on a quick search I made the changes described above. I understand the issue is in the asynchronous call I am making and I went through this suggested link but I am unable to figure out the right structure. Can anyone provide me the right syntax so that the page loads up correctly and also returns the ip address of the client and sets it to sessionAttribute?

UPDATE: After some suggestions I made following changes to my code (link here - https://jsfiddle.net/ywdeu0o4/3/)

const configDefault = {
  Bot: {
    // initial sessionAttributes
    sessionAttributes: {},
  },
};

$(document).ready(function(){
configDefault.Bot.sessionAttributes.ip = myIP();
 // undefined
});

function myIP() {
    $.getJSON("//freegeoip.net/json/?callback=?", function(data) {
        //console.log(data.ip);
        return data.ip;
    });
}
console.log("myVar:",configDefault.Bot.sessionAttributes.ip);

When I run this code after opening the console I get undefined value for configDefault.Bot.sessionAttributes.ip. Why is it coming as undefined and not the ip address?

user2916886
  • 847
  • 2
  • 16
  • 35
  • `sessionAttr` will be `undefined` because your `myIP()` function doesn't return anything. I'm assuming your issue has to do with returning a value from an asynchronous callback function. Check this out: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – Lennholm Jun 23 '17 at 22:58
  • @MikaelLennholm But why is it not loading the page? Is there error in my code above? – user2916886 Jun 24 '17 at 02:57

2 Answers2

1

Open the browser dev tool (F12). Very likely you will see an error in the console. For instance the data is already an object, no need to JSON.parse it.

Then there's the asynchronous nature of ajax as Mikael already pointed out. Use a callback function to do something with the data.

EDIT: there was already a link to a page explaining how to use a callback, but maybe it was too much to figure out. You should learn about variables, functions, variable scope, callbacks and async behavior.

Basically you could replace that return with code that updates your global object, and do stuff... or create a new function that you can call back:

const configDefault = {
  Bot: {
    // initial sessionAttributes
    sessionAttributes: {},
  },
};
$(document).ready(function() {
  myIP();
});

function myIP() {
  $.getJSON("//freegeoip.net/json/?callback=?", function(data) {
    // after succesful ajax response call myCallback with data.ip
    myCallback(data.ip); 
  });
}

function myCallback(theIP) {
// do your stuff here
   console.log("Data.ip:", theIP);
   configDefault.Bot.sessionAttributes.ip = theIP;
   console.log("ConfigDefault:", configDefault);
};

Example: https://jsfiddle.net/bvevqdb1/

You can also call the callback without passing parameters and without (). That would pass the whole ajax result to the callback, and you can then process it there: https://jsfiddle.net/bvevqdb1/1/

yezzz
  • 2,990
  • 1
  • 10
  • 19
  • I am not at all familiar with JavaScript (I just began learning it today) so is it possible if you explain it through code what should be the correct way for my code? – user2916886 Jun 24 '17 at 03:00
  • I am getting error `$ is not defined`. I added the suggested changes to the code at this link - https://github.com/awslabs/aws-lex-web-ui/blob/master/lex-web-ui/src/config/index.js – user2916886 Jun 25 '17 at 03:38
  • I don't see my code anywhere on that page... the jsfiddle examples are working, right? – yezzz Jun 25 '17 at 10:15
  • 1
    Ah, I see now it's a reply to another question your created using my code. Well, a thank you and an upvote for helping out would have been appreciated... – yezzz Jun 26 '17 at 19:27
-1

This seems to work fine for me: https://jsfiddle.net/ywdeu0o4/1/

$(document).ready(function(){
  myIP();
});

function myIP() {
    $.getJSON("//freegeoip.net/json/?callback=?", function(data) {
        console.log(data.ip);
        return data.ip;
    });
}
mjw
  • 1,196
  • 1
  • 12
  • 19
  • Yup, but this is more like what OP asked: https://jsfiddle.net/ywdeu0o4/2/ – yezzz Jun 23 '17 at 23:50
  • When I execute your code above in the editor link you posted I do not see any output(I don't see ip address coming) – user2916886 Jun 24 '17 at 03:03
  • Hit the jsfiddle run button again after opening the console – yezzz Jun 24 '17 at 10:48
  • did you seriously downvote for that? that isn't "more like" it at all. people are strange – mjw Jun 24 '17 at 13:42
  • I didn't downvoted it. One doubt. Don't we need `` to have the jQuery run? in your code I do not see that. – user2916886 Jun 24 '17 at 19:20
  • Since I needed to set the `ip address` to `sessionAttributes` I made some changes to the code you posted but `sessionAttributes` is coming as `undefined` when I open the console and run the example. Here is my updated code: https://jsfiddle.net/ywdeu0o4/3/ – user2916886 Jun 24 '17 at 20:47
  • It is undefined because 1. myIP() doesn't return anything. 2. even if it would, it would return it too late. The code that called myIP() will not wait for a return value, because $.getJSON = ajax = asynchronous. The solution is to use a callback, or use js promises/$.deferred but that's way more advanced. – yezzz Jun 24 '17 at 21:18
  • @yezzz Can you provide the solution that will work? Since I am very new to this so I am unable to figure it out – user2916886 Jun 24 '17 at 21:20
  • Ok, see my answer – yezzz Jun 24 '17 at 23:27