Braces and spaces creating problem..please Help!

I have been trying to render a data from an api but the curly braces and spaces are creating a problem. I have been trying to debug the code but no luck yet! here’s my code

window.onload = function() {
  fetch ('https://jsonplaceholder.typicode.com/posts/users'). then( function (response){
    console.log(response);
    document.getElementById('container-1')[0].innerHTML= user.id;
    document.getElementById('container-2')[1].innerHTML= user.name;
    document.getElementById('container-3')[2].innerHTML= user.email;
   
    //console.log( response.json(user));
}).then (function (userID){
            document.getElementById('app').innerHTML = userID.map(user => 
                `<div>
                  <div>Id: ${user.id}</div>
                  <div>Title: ${user.name}</div>
                  <div>Body: ${user.email}</div>
                </div>`
            ).join('') 
}),
});


Hi @naimiii, it’s just a matter of syntax.

You have a comma at the end of your then method.
Just remove it, and the extra ) and you should be fine

[previous code]
.then (function (userID){
            document.getElementById('app').innerHTML = userID.map(user => 
                `<div>
                  <div>Id: ${user.id}</div>
                  <div>Title: ${user.name}</div>
                  <div>Body: ${user.email}</div>
                </div>`
            ).join('') 
});
};
1 Like

Just to be clear, your fetch code is not correct nor does the URL you are using work.

  1. user is undefined inside the first then.

  2. You have to return response.json() to the next then.

  3. The URL is not correct.

1 Like

Hi @Marmiz , I tried your suggestion but the error is still there.

Please post code, not images.

Hi @lasjorg ,I have already posted my code in my query… please check…

You have removed the closing ) from the map.

).join("");

@lasjorg

Please do not post images.

Now you remove the closing ) from the then.

@lasjorg the code is still throwing an error.

window.onload = function() {
  fetch ('https://jsonplaceholder.typicode.com/posts/users'). then( function (users){
    console.log(users);
    document.getElementById('container-1')[0].innerHTML= user.id;
    document.getElementById('container-2')[1].innerHTML= user.name;
    document.getElementById('container-3')[2].innerHTML= user.email;
   
    console.log( response.json(users));
}) .then (function (userID){
  document.getElementById('app').innerHTML = userID.map(user => 
      `<div>
        <div>Id: ${user.id}</div>
        <div>name: ${user.name}</div>
        <div>email: ${user.email}</div>
      </div>`
  ).join('') 
  });
});

Why do you keep changing other things?

Now you added back the closing ) you initially removed.

        )
        .join("");
    });
};

@lasjorg I have tried different ways to fix it… Let me know if you know where is the actual issue …

I just told you…

window.onload = function () {
  fetch("https://jsonplaceholder.typicode.com/users")
    .then(function (users) {
      return users.json();
    })
    .then(function (userID) {
      document.getElementById("app").innerHTML = userID
        .map(
          (user) =>
            `<div>
        <div>Id: ${user.id}</div>
        <div>name: ${user.name}</div>
        <div>email: ${user.email}</div>
      </div>`
        )
        .join("");
    });
}; // this closes the onload function body, there is no parentheses after the closing }

I would strongly suggest you install the Bracket Pair Colorizer extension in VS Code.

@lasjorg thank you for the suggestion but the code is still throwing an error at curly braces before the round bracket.

        .join("")
        });
};

Why don’t you write the skeleton of your code again, then copy paste the function blocks in?

window.onload = function(){
  fetch(url).then(function(users) { ... })
}

@naimiii, it’s really hard to provide proper guidance if all you do is paste small snippets (if any) of your code.

It’s best if you make a question and copy any code you have at the time you make the question to help with reproducibility.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.