I'm in the process of creating a website that, among other things (and crucially for this particular issue), stores your current location data in a variable by fetching it from the ipinfo API (https://ipinfo.io/json)
After encountering the problem of my website initially displaying "undefined" in the location section and subsequently redirecting me to url/[object%20Object], I attempted to resolve it using JSON.parse(). However, upon implementing parse, I encountered the following error in the console log: (see below)
The JSON response can be directly utilized without saving, with no adverse effects. To view its structure, you can visit the API link provided above.
Below is the JavaScript code I have incorporated:
var location;
// invoked once the document has loaded completely
$(document).ready(function(){
// retrieves and displays your current location data
$.get("https://ipinfo.io/json", function(response) {
location = JSON.parse(response);
console.log(location);
document.querySelector('.location').innerHTML = location.city;
});
Here is the corresponding HTML:
<h4>You are playing from:</h4>
<div>
<p class="location"></p>
<p class="country"></p>
<p class="region"></p>
</div>
<div class="row">
<div class="column">
<h3>Column 1</h3>
<p id="city_a">
</p>
</div>
<div class="column">
<h3>Column 2</h3>
<p id="city_b">
</p>
</div>
This error message appears in the console:
VM102:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse ()
at Object.success ((index):64)
at u (VM94 jquery-3.3.1.min.js:2)
at Object.fireWith [as resolveWith] (VM94 jquery-3.3.1.min.js:2)
at k (VM94 jquery-3.3.1.min.js:2)
at XMLHttpRequest. (VM94 jquery-3.3.1.min.js:2)
Any assistance would be greatly appreciated! Thank you in advance!