POST-request to get data from API

Question

I'm trying to make a login system for my API, but I can't seem to get a response back in my Javascript code. However, in POSTman, I can:

https://i.stack.imgur.com/WneNm.png

This is my javascript code:

 function loginUser(email, password) { let person = {Email: email, Password: password}; fetch(UrlAuthenticationToken, { method: "POST", body: JSON.stringify(person), headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' } }).then((response) =>{ if (response.status === 200) { console.log(`Logged in ${response.status}`); return response.json(); // only for generating token } else { throw new Error(`error with status ${response.status}`); } }).then((response) => { let accessPass = { Token: reponse.Token, User: { Email: reponse.User.Email, Type: reponse.User.Type } } sessionStorage.setItem(accessPass); if(response.User.Type === 'Student'){ window.href(UrlStudent); } else if(response.User.Type === 'Lector'){ window.href(UrlLecturer) } else if(response.User.Type === 'Business'){ window.href(UrlCompany) } }).catch((e) => { Console.log(e); }); };

The thing is, I can send my JSON-body to the back-end and the back-end does return a response, but the front end can't seem to handle said response. I wonder what is going wrong; when I debug my code goes from the first.then all the way to the end, skipping the rest.

Answer 1

Like this?

$.ajax({
  type : "POST",
  url : "http://localhost/service.asp",
  data: {Email: "asd@asd.asd", Password: "asdasd"},
  //data: '{Email: "asd@asd.asd", Password: "asdasd"}',

  headers : {          
    "Accept" : "application/json; charset=utf-8",         
    "Content-Type": "application/json; charset=utf-8"   
  }        
  success : function(response) {  
    Console.log(response);
  }
});

Answer 2

What I see is you are using capitalize keys but in your postman I can see all the keys are in lowercase. You have used key like response.Token with capital T. But your response from postman seems to be like response.token with small t. Apart from this your code has some type mistake as well. You have misspelled response in accessPass variable.

Your function needs to be like:-

function loginUser(email, password) {
    let person = {Email: email, Password: password};
    fetch(UrlAuthenticationToken, {
        method: "POST",
        body: JSON.stringify(person),
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    })
        .then((response) =>{
            if (response.status === 200) {
                console.log(`Logged in ${response.status}`);
                return response.json(); // only for generating token
            } else {
                throw new Error(`error with status ${response.status}`);
            }
        })
        .then((response) => {

            let accessPass =
            {
                Token: response.token,
                User:
                {
                    Email: response.user.email,
                    Type: response.user.type
                }
            }

            sessionStorage.setItem(accessPass);

            if(response.user.type === 'Student'){
                window.href(UrlStudent);
            }
            else if(response.user.type === 'Lector'){
                window.href(UrlLecturer)
            }
            else if(response.user.type === 'Business'){
                window.href(UrlCompany)
            }
        })
        .catch((e) => {
            Console.log(e);
        });
};