Uncaught SyntaxError: Unexpeted token ':'

Question

I have googled the life out of the search engine and am unable to find a fix for my error 'Uncaught SyntaxError: Unexpected token ':' all I am trying to do is open JSON file from js folder. here is my javascript code using ajax:

function getData() {
  console.log("about to get data");

  $.ajax({
    type: "GET",
    crossDomain: true,
    url: "js/data.json",
    dataType: "jsonp",
    // data:"{firstName:Rack}",
    // accepts:'application/json',
    //contentType: 'Content-Type:text/html',
    // jsonpCallback: 'parseResponse',
    success: function(response) {
      console.log("Successful");
      console.log(response);
    },
    beforeSend: function() {
      console.log("before send: " + this.response);
    }
  });
}

and in my dashboard.html page, I call this via HTML button on click event approach.

<div class="container">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <button type="button" class="btn btn-info" onclick="getData()">Get data</button>
      <br />
      <p></p>
    </div>
  </div>
</div>

The above does call as I hit the console.log line within getData() method. the json file format look like this:

{
  "firstName": "Rack",
  "lastName": "Jackon",
  "gender": "man",
  "age": 24,
  "address": {
    "streetAddress": "126",
    "city": "San Jone",
    "state": "CA",
    "postalCode": "394221"
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "7383627627"
    }
  ]
}

when inspecting the error message it keeps pointing to firstName : Rack line I can't seem to find any faults with the JSON file. I have tried different approaches as you can see from the comment outline all with failed attempt. if you change the dataType from jsonp to json it throw access to xmlhttprequest CORS policy error which I have also spent hours end trying to find a fix for and the closest I got was the above approach. Any support or direction would be very much appreciated am sure I am doing something stilly.

You cannot use JSONP unless the target website is designed to handle it. — Pointy, May 23 '21 at 13:36
There is something missing in that json, because (at the very least) the `{}` are not balanced, ie you have one extra `}`. And if this is just part of a bigger json, the first property (the object) would need a name. — derpirscher, May 23 '21 at 14:00
JSONP is not JSON. You said the type is JSONP but you are trying to parse JSON. See the first duplicate. See the second duplicate for general CORS guidance. Given the URL doesn’t suggest cross-origin, there is a good change the third duplicate has advice for your specific circumstances. — Quentin, May 23 '21 at 15:18

score 0 · Answer 1 · answered May 23 '21 at 14:59

0

In your javascript function one curly bracket ( { ) is extra.there is no balancing curly bracket {}. And in json file, there is no balancing curly bracket. Check it

answered May 23 '21 at 14:59

Suvarna

11

2

This is already mentioned in the comment. If this is indeed the issue, it should be closed as a typo. Questions with typos add no future value to the site. – adiga May 23 '21 at 15:08
Guys, I fix the issue; and I hope this helps others too basically if you develop on your local machine and you want to access JSON file from the local machine via ajax or ASP.NET /Core you will need to run it from a web server locally best to install a live server in visual studio code and then open the file in question , this will fix the issue , especially the CROS policy error message, please refer to this amazing youtube video that explains it well https://www.youtube.com/watch?v=nx8E5BF0XuE – Waheed Rafiq May 24 '21 at 16:27

Uncaught SyntaxError: Unexpeted token ':'

1 Answers1