ページを開くデバイスのIPアドレスを取得しようとするとJavascriptページが機能しない

Question

this projectに基づいてweb uiプロジェクトに取り組んでいます。今私がしたいのは、ユーザーがWebページを開くときに、このページが開かれているデバイスのip addressが返されるということです。このために私はjavascript`コード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(); 

私も同じjavascriptコードファイルの先頭に<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>を追加しました。今度はsessionAttrの定数がthis code fileの行60で呼び出されます（sessionAttributes: config.lex.sessionAttributesをsessionAttributes: config.sessionAttrに変更しました）。

このページをロードしようとすると、何も表示されません。上記のような変更を加えなければ、ページが正しく読み込まれます。だから何とか私はこのページをねじ込んで私の追加でいくつかの間違いをしています。

注：私はJavaScriptに精通していませんが、クイック検索に基づいて上記の変更を行いました。問題は私が作っている非同期呼び出しにあり、これを通過したことがわかりますsuggested linkしかし、私は正しい構造を理解することができません。誰も私に適切な構文を提供して、ページが正しくロードされ、クライアントのip addressを返して、それをsessionAttributeに設定することはできますか？

UPDATE

： - 私は、コンソールを開いた後に、このコードを実行すると、私はconfigDefault.Bot.sessionAttributes.ipためundefined値を取得

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); 

は、いくつかの提案後、私は（https://jsfiddle.net/ywdeu0o4/3/ここにリンク）私のコードに次の変更を行いました。 IPアドレスではなく、定義されていないのはなぜですか？

Answer 1

これが私のために正常に動作するようです：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; 
    }); 
} 

Answer 2

開いているブラウザのdevのツール（F12）。あなたはコンソールにエラーが表示される可能性が非常に高いです。例えば、データはすでにオブジェクトであり、JSON.parseする必要はありません。

ミカエルがすでに指摘したように、非同期的な性質のアヤックスがあります。データで何かをするには、コールバック関数を使用します。

EDIT：既にコールバックの使用方法を説明しているページへのリンクがありましたが、あまりにも多くのことを把握するには多分でした。変数、関数、変数スコープ、コールバック、非同期動作について学ぶ必要があります。

基本的に、あなたのグローバルオブジェクトを更新するコードとそのリターンを交換し、ものを行う...またはあなたが戻って呼び出すことができる新しい関数を作成することができます。

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); 
}; 

例：https://jsfiddle.net/bvevqdb1/

あなたはパラメータを渡さずに、コールバックを呼び出すこともできます（）。https://jsfiddle.net/bvevqdb1/1/