JSON-Antwort auf Array erhalten ipinfo.io

Question

Hallo Ich habe ein Problem mit der Benutzer IP und Standort zu bekommen. Die JSON-Antwort funktioniert, aber ich habe ein Problem, sie in mein Fragen-Array zu bekommen. Wann immer die Frage Popups

"Ihr aktueller Standort?"

es geht leer. Stattdessen möchte ich es drucken:

"Ihre Lage: IP-Adresse von ipinfo.io und Location Beispiel ip:. 123.123.132 Ort: USA"

oder jede andere Art und Weise die bekommen Benutzer IP und Standort und zeigen sie als Dialog Sie befinden sich: p: 123.123.132 Ort: 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"> 
 
\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

Sie haben keine response im Rahmen questions so diese:

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

nicht funktionieren.

Sie müssen die Antwort von ipinfo.io irgendwie übergeben.

Wenn Sie anrufen

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

Sie scheinen die Antwort in mehrere DOM-Elemente zu speichern, so dass Sie es von dort abrufen kann oder nur die Elemente angezeigt werden .... (ich sehe das nicht in Ihrem HTML)

Oder es in einer variablen speichern im gleichen Umfang von questions

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

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

und als verwenden ipinfoResponse statt response in response: input => 'You are located:' + (ipinfoResponse) + '!'

Aber beachten Sie, dass auf diese Weise ipinfoResponse undefiniert sein wird, bis Sie die Antwort erhalten. Sie sollten den Aufruf von ipinfo wahrscheinlich bei Bedarf durchführen und antworten, wenn Sie die Daten haben.

Answer 2

In der Fragen Array, Pfeil Funktionsparameter als input genannt; während Sie in der Zeichenfolgenvorlage response verwendet haben. Wahrscheinlich bin ich ein Tippfehler.

ändern Sie es wie unten,

{text: 'Ihr aktueller Standort?', Audio: 'Musik/becoming.ogg', Antwort: Eingang => 'Sie befinden sich:' + (input) + ' '},