Uncaught SyntaxError: Unexpected token '<' I'm a Begginer to brackets

Discussion in 'HTML & Website Design' started by Bracket Brain, May 20, 2020.

0
  1. #1
    Hello I'm trying to process an API call.
    I've written the API request code in html in brackets.
    I'm a novice.

    Getting the message
    Uncaught SyntaxError: Unexpected token '<'



    Here's the code, I've left out actual http link as post kept getting rejected:
    (And I've substituted the APi Key)

    <!doctype html>
<html>
<script>
//GET

var burl = ' ';
var endpoint = 'status?';
var parameters = 'api_key=N#####VIlX8zb!9ZL';

var url = burl + endpoint + parameters;

request ('GET' ,url).
then((r1) => {
//SPECIFIY THE CODE TO HANDLE API RESPONSE
console.log(r1);
}).
catch((err) => {
console.log(err);
})

function request (method, url) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = resolve;
xhr.onerror = reject;
xhr.send();
});
}

</script>
</html>
    Code (markup):
     
    Last edited by a moderator: May 20, 2020
    Bracket Brain, May 20, 2020 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Does it say WHERE this "unexpected token" occurs? WHAT is saying unexpected token, your editor?

    Though honestly, this is a great example of why I dislike this "promise" BS with the needlessly pointlessly cryptic trash arrow functions... and how this new methodology pisses on state/error handling.

    But I don't see anything in that code that should be saying that as an error.
     
    deathshadow, May 21, 2020 IP
  3. Efetobor Agbontaen

    Efetobor Agbontaen Active Member

    Messages:
    137
    Likes Received:
    41
    Best Answers:
    5
    Trophy Points:
    85
    #3
    This Unexpected token error occurs mostly when a function expects JSON input but gets HTML input. E.g JSON.parse(res);
    If the res variable comes as an HTML string '<>'. You will get that error. Some functions use JSON only functions internally so.....

    Like @deathshadow mentioned, temporarily do away with the promise and console.log the raw output from the Ajax request.
     
    Efetobor Agbontaen, Jul 8, 2020 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,789
    Likes Received:
    4,528
    Best Answers:
    123
    Trophy Points:
    665
    #4
    What's with the full stops in the code?
    upload_2020-7-9_13-22-29.png
     
    sarahk, Jul 8, 2020 IP
  5. Efetobor Agbontaen

    Efetobor Agbontaen Active Member

    Messages:
    137
    Likes Received:
    41
    Best Answers:
    5
    Trophy Points:
    85
    #5
    That's Javascript Promise
     
    Efetobor Agbontaen, Jul 8, 2020 IP
  6. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #6
    What is the data you want to fetch? This seems to be the code straight out from a tutorial you copied from somewhere.
    Try something more simple to see what error is:
    
<!doctype html>
<html>
<script>
//GET
    var burl = ' ';
    var endpoint = 'status?';
    var parameters = 'api_key=N#####VIlX8zb!9ZL';
    var url = burl + endpoint + parameters;
    fetch(url).then(function(response) {
        return (response.text());
    }).then(function(responseText) {
        console.log(responseText); // do something with the response text, export it to other function
    }).catch(function(err) {
        console.log(err);
    });
</script>
</html>
    Code (markup):
     
    ketting00, Jul 13, 2020 IP
    sarahk likes this.
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    That's an accepted (though ugly) optional formatting for promises, hence the 'then' on the next line. It's effectively the same as:

    request ('GET' ,url).then((r1) => {
  //SPECIFIY THE CODE TO HANDLE API RESPONSE
  console.log(r1);
}).catch((err) => {
  console.log(err);
})
    Code (markup):
    And part of why I hate that promise junk. IT's cryptic, painfully daisy-chains the request logic, when used with the garbage "request" idiocy removes your ability to properly handle error status and provides ZERO mechanism for handling response codes...

    ... and it's why so many sites that rely on it go off to never-never land if there's a problem with the request in an endless "loading" loop because they don't even make provisions for something going wrong.

    Which is why I'd take this entire section of code, throw it in the trash, and just use good old-fashioned XMLHttpRequest. Might be more code, but it's more reliable, let's you leverage status, has hooks for monitoring the progress, etc, etc, etc. Fetch/request/etc are incompetent trash and a total waste of time and effort, and rank amongst the recent ECMAScript changes that reek of people who don't have enough experience writing real software now being in charge of the language spec.
     
    deathshadow, Jul 14, 2020 IP