Unable to set JSON response as a var neither with nor without JSON.parse()

Question

I am setting a little website that among other things (importantly for this problem) saves your current location data in a var, which it retrieves from the ipinfo API (https://ipinfo.io/json)

I tried using JSON.parse() which solved the problem of my website displaying "undefined" at the p-tag where the location is normally displayed before redirecting me to url/[object%20Object] after half a second. With parse I get the following error console.log: (see further down)

The JSON response can be used without saving without causing any problems. To see how it looks like click the API link above.

Here is my JS code:

var location;

// called when the document is fully loaded
$(document).ready(function(){

    // gets your current location data and displays it
    $.get("https://ipinfo.io/json", function(response) {

        location = JSON.parse(response);
        console.log(location);
        document.querySelector('.location').innerHTML = location.city;

    });

Here is the 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 is the error in the console I get:

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)

Anything would help :) Thanks in advance!

exactly the same as the JSON response. Click: https://ipinfo.io/json to see how it looks like (won't share the exact response due to privacy reasons) — a_hayler, Jun 22 '19 at 22:28

ggorlen · Accepted Answer · 2019-06-22T22:52:35.587

1

Your response data is already parsed into a JS object due to the Content-Type type of the response header; you should use the response object directly:

$.get("https://ipinfo.io/json", function (response) {
  document.querySelector('.location').innerHTML = response.city;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="location"></p>

The error you're seeing when you attempt to parse the object is due to JSON.parse() calling object.toString(), which returns "[object Object]":

const obj = {};

console.log(obj.toString()); // "[object Object]"
JSON.parse(obj); // Unexpected token o in JSON at position 1

As for your confusing redirect, the cause is the global Window.location variable. Using let location; would reveal that you're setting an existing variable, throwing the error "Uncaught SyntaxError: Identifier 'location' has already been declared". Using a different variable name solves the issue.

let location; // Uncaught SyntaxError: Identifier 'location' has already been declared

location = "foo bar";

edited Jun 22 '19 at 22:52

answered Jun 22 '19 at 22:29

ggorlen

44,755
7
76
106

You are absolutely right, but do then have any clue why my code redirects me to url/[object%20Object] and before displays "undefined" at the p-tag when I use "location = response;"? @ggorlen – a_hayler Jun 22 '19 at 22:35
I'm betting it has something to do with your use of `document.querySelector('.location').innerHTML = location.city;`. Maybe that's resolving to document.location? Rewriting the document location can cause a reload of the page. – darrin Jun 22 '19 at 22:40
@darrin tested it. Thank you! Works now with another name for the variable :) – a_hayler Jun 22 '19 at 22:44
Yeah, you're using the global location. If you use `let`, you'll get an error that the variable has already been defined. – ggorlen Jun 22 '19 at 22:45

Unable to set JSON response as a var neither with nor without JSON.parse()

1 Answers1