配列ipinfo.ioへのJsonの応答を取得

Question

こんにちは私はユーザーのIPと場所を取得することに問題があります。 JSONレスポンスは機能しますが、問題の配列に問題があります。いつでも質問のポップアップ

"あなたの現在の場所？"

空白になります。代わりに、私は印刷にそれをしたい：

は "あなたの位置：。ipinfo.ioと場所からのIPアドレスの例IP：123.123.132 場所：USA"

または取得する他の方法ユーザーのIPアドレスと場所を指定してダイアログとして表示する場所：p：123.123.132場所：米国。質問配列、矢印関数のパラメータがinputとして命名されて

let questions = [ 
 
    {text:'What is your name?', audio:'music/openmind.ogg', response : input => 'Hello ' + input + '!' }, 
 
    {text:'How old are you?', response : input => 'That means you were born in ' + (2017 - input) + '.'}, 
 
    {text:'Where are you from?', audio:'music/beone.ogg', response: input => 'You are from ' + (input) + '.'}, 
 
    {text: 'Do you eat healthy?', audio: 'music/becoming.ogg', response: input => 'Acording to my data you are eating ' + (input) + ' and that is healthy!'}, 
 
    {text: 'What is your time?', audio: 'music/becoming.ogg', response: input => 'Where I am located' + (new Date().toLocaleTimeString()) + 'that is the day!'}, 
 
    {text: 'What language do you speak', audio: 'music/becoming.ogg', response: input => 'Acording to me you speak: ' + language() + '!'}, 
 
    {text: 'Your current location?', audio: 'music/becoming.ogg', response: input => 'You are located:' + (response) + '!'}, 
 

 

 
]; 
 

 
let output = $('#output'), 
 
    input = $("#input"), 
 
    curQuestion; 
 

 
function ask() { 
 
    let qi = Math.floor(Math.random() * questions.length); //depending on your needs, a check could be added if it's been asked directly before or only recycle questions when all are asked 
 
    curQuestion = questions[qi]; 
 
    setOutput(curQuestion.text); 
 
    input.val(''); 
 
} 
 

 
ask(); //first call 
 

 
function respond(){ 
 
    let q = curQuestion; 
 
    if(q.audio) 
 
    new Audio(q.audio).play(); 
 
    setOutput(q.response(input.val())); 
 
    setTimeout(ask, 5000); 
 
} 
 

 
function setOutput(txt){ 
 
    output.html($('<h1>').text(txt)); 
 
} 
 

 

 
$(document).keypress(function(e) { 
 
    if (e.which == 13) { 
 
    respond(); 
 
    return false; 
 
    } 
 
}); 
 

 
function language() { 
 
    var userLang = navigator.language || navigator.userLanguage; 
 
    return userLang 
 
} 
 

 
$.get("http://ipinfo.io", function (response) { 
 
    $("#ip").html("IP: " + response.ip); 
 
    $("#address").html("Location: " + response.city + ", " + response.region); 
 
    $("#details").html(JSON.stringify(response, null, 4)); 
 
}, "jsonp");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    <link href="css/style.css" rel="stylesheet"> 
 
\t <img src="http://i3.kym-cdn.com/photos/images/original/001/138/377/fcc.gif" class="img-responsive center-block" alt="ffc.gif"> 
 
\t <h1 class="text-center">Hello I am ZENYATTA!</h1> 
 
\t <br> <br> 
 
\t <div class="container"> 
 
<div class="well"> 
 
<div id="output"></div> 
 
</div> 
 

 
    <div class="col-md-2 col-md-offset-5"> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t <label>Responce:</label> 
 
\t \t \t <input type="text" class="form-control" id="input" value=""> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 

 
    
 

 
</div> 
 

 

 
<!-- jquery for enter key press --> 
 
<script src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></script> 
 
<script src="js/s.js"> </script>

Answer 1

あなたはので、このquestionsの範囲で何responseを持っていない：

let questions = [ 
    ..., 
    { 
    text: 'Your current location?', 
    audio: 'music/becoming.ogg', 
    response: input => 'You are located:' + (response) + '!' 
    } 
]; 

が動作しません。

何とか応答をipinfo.ioから渡す必要があります。

あなたは

$.get("http://ipinfo.io", function (response) { 
    $("#ip").html("IP: " + response.ip); 
    $("#address").html("Location: " + response.city + ", " + response.region); 
    $("#details").html(JSON.stringify(response, null, 4)); 
}, "jsonp"); 

を呼び出すときに（私はあなたのHTMLに表示されていない....あなたはそこからそれを取り出すか、単にこれらの要素を表示することができますので、いくつかのDOM要素に応答を格納しているように見えます）

またはquestions

let questions = ...  
let ipinfoResponse; 
... 

$.get("http://ipinfo.io", function (response) { 
    ipinfoResponse = response; 
}, "jsonp"); 

の同じスコープ内変数に格納し、よりipinfoResponse代わりに使用response in response: input => 'You are located:' + (ipinfoResponse) + '!'

このように、ipinfoResponseは応答を受け取るまで定義されません。おそらく、必要なときにipinfoを呼び出し、データがあるときに応答するべきです。

Answer 2

。文字列テンプレートにはresponseを使用しています。おそらく私はタイプミス。

以下のように変更して、

{テキスト

： 'あなたの現在の場所？'、オーディオ： '音楽/ becoming.ogg'、応答：入力=> 'あなたが置かれている：' +（inputが）+ ' ！ '}、