Syntax error unexpected token '>'

Question

I've been testing my JS code on different browsers but it doesn't seem to work on some of them and on mobile either.

JS

function req1() {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(json => {
      var title = json.title;
      var body = json.body; 
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
      document.getElementById("newsContent2").innerHTML = body;
    });
}
req1();

By reading this question I understood that the problem could be related to '=>' because it is a ES6 element and not all the browsers support it. But as you can see here it seems to be the way to get those json data: https://jsonplaceholder.typicode.com/

Is there a way to avoid using '=>' in this function to make it work on all the browsers?

Here the error that I get on Safari 9 for example:

I tried some solutions but now I get this error:

posts are not printed yet, any idea?

Yes, use normal `function` syntax. That is, if there are any browsers that support `fetch()` but not ES6 arrow functions. IDK — Luca Kiebel, May 07 '18 at 13:48
You cannot use "lambda" without transpilers yet. Use Babel for example — obey, May 07 '18 at 13:49
How come the error actually states it's from an anonymous function, if it doesn't support arrow functions? Are you sure the error is related to that? — Deleteman, May 07 '18 at 13:50
Safari 9 doesn’t support Fetch API either so fixing the arrow functions is just a start. On the other hand Safari 9 is three years old and has 0.03% market share so personally I wouldn’t really worry about it. — JJJ, May 07 '18 at 13:56
I'm testing in on different browsers but the error(screenshot) comes from Safari9. The real problem is that it is not even working on IOS (all safari versions) — Crashy, May 07 '18 at 14:03
you need fetch Pollyfill. and for now avoid using arrow function (=>). if you want better browser support. — patelarpan, May 07 '18 at 14:05
It never works on IOS, I just tried with iphone7 and Safari10 but I still get blank space and Safari10 is quite recent — Crashy, May 07 '18 at 14:07

Luca Kiebel · Answer 1 · 2018-05-07T14:04:45.507

2

Just use normal function syntax instead of ES6 arrow-syntax:

function req1() {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(function (res) {return res.json()})
    .then(function (json) {
      var title = json.title;
      var body = json.body; 
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
      document.getElementById("newsContent2").innerHTML = body;
    });
}
req1();

Most browsers that don't support ES6 arrow-syntax are unlikely to support the Fetch API. For those I would suggest using another form of HTTP request, or using a Polyfill, like GitHub's

edited May 07 '18 at 14:04

answered May 07 '18 at 13:50

Luca Kiebel

9,790
7
29
44

Any idea why posts are not printed yet and I get this error now: ReferenceError: Can't find variable: fetch. I'm editing my question with the screenshot – Crashy May 07 '18 at 14:00
As I wrote in my comment, not all browsers support the fetch API. In that case you need to use some other form of HTTP request – Luca Kiebel May 07 '18 at 14:01

score 1 · Answer 2 · answered May 07 '18 at 13:50

Use a normal function instead of a lambda:

"use strict";

function req1() {
    fetch('https://jsonplaceholder.typicode.com/posts/1').then(function(response){
        return response.json();
    }).then(function(json){
        var title = json.title;
        var body = json.body;
        document.getElementById("newsTitle").innerHTML = title;
        document.getElementById("newsContent").innerHTML = body;
        document.getElementById("newsContent2").innerHTML = body;
    });
}
req1();

Just write

.then(function(json){

Instead of

.then(response => response.json())

Also, if you're not sure about the ES6 Syntax in your script, you can use something like babel:

https://babeljs.io/repl/

patelarpan · Accepted Answer · 2018-05-07T14:22:51.777

you need use fetch polyfill and old function syntax not the new arrow function syntax of es6.

function req1() {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(function (res) {return res.json()})
    .then(function (json) {
      var title = json.title;
      var body = json.body; 
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
    });
}
req1();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.js"></script>
<div id="newsTitle"></div>
<div id="newsContent"> </div>

Browser Support For Fetch API polyfill

Chrome
Firefox
Safari 6.1+
Internet Explorer 10+

Mamun · Answer 4 · 2018-05-07T14:15:03.227

Change the following lines

then(response => response.json())

To

.then(function(response){ response.json() })

And

.then(json => {

To

.then(function (json) {

Full Code:

function req1() {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
   .then(function(response){ response.json()})
   .then(function (json){
     var title = json.title;
     var body = json.body; 
     document.getElementById("newsTitle").innerHTML = title;
     document.getElementById("newsContent").innerHTML = body;
     document.getElementById("newsContent2").innerHTML = body;
   });
}
req1();

score -1 · Answer 5 · answered May 07 '18 at 13:55

Why not to use a simple request

 var xhReq = new XMLHttpRequest();
 xhReq.open("GET", "https://jsonplaceholder.typicode.com/posts/1", false);
 xhReq.send(null);
 var serverResponse = xhReq.responseText;
 var json = JSON.parse(serverResponse);
 alert(json.title);

Syntax error unexpected token '>'

5 Answers5