获取Json对数组ipinfo.io的响应

Question

你好，我有一个问题，获得用户的IP和位置。但是，JSON响应在问题数组中有问题。当问题出现的时候

“你现在的位置？”

一片空白。相反，我想把它打印出来：

“您的地址:来自ipinfo.io和位置的IP地址。例如ip: 123.123.132地址:美国”

或获取用户IP和位置的任何其他方式，并将其显示为您所在的对话框: p: 123.123.132位置: USA。

​

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">
	 <img src="http://i3.kym-cdn.com/photos/images/original/001/138/377/fcc.gif" class="img-responsive center-block" alt="ffc.gif">
	 <h1 class="text-center">Hello I am ZENYATTA!</h1>
	 <br> <br>
	 <div class="container">
<div class="well">
<div id="output"></div>
</div>

    <div class="col-md-2 col-md-offset-5">
			<div class="form-group">
			  <label>Responce:</label>
			  <input type="text" class="form-control" id="input" value="">
			</div>
		</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

在response的范围内没有questions，所以如下所示：

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

您似乎将响应存储在几个DOM元素中，这样您就可以从那里检索它或只显示这些元素.(我看不到你的HTML)

或将其存储在questions相同范围内的变量中。

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

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

而不是在ipinfoResponse中使用response代替response: input => 'You are located:' + (ipinfoResponse) + '!'

但是请注意，在得到响应之前，ipinfoResponse将是未定义的。您可能应该在需要时调用ipinfo，并在有数据时作出响应。

Answer 2

在问句数组中，箭头函数参数被命名为input；而在字符串模板中使用了response。可能是我打错了。

修改如下，

{文本：“您的当前位置？”，音频：“音乐/变成. are”，响应:输入=>‘您所在的位置：’+ (input) +‘！}，