Unable to use the response gathered by Fetch API and use it in my code later

Question

I'm trying to build a HTML, CSS, JS website and want to incorporate an API and use the response further in my website.

I've managed to make this API part work but I'm stuck with the final part.

• What I've Achieved

  1. Executing a JS function using FETCH that makes a POST Call with Auth Headers
  2. Getting the response to show up inside my Chrome Developer Console.

• What I'm trying to achieve

  1. Use the Response (Web URL) that is being received by the POST API Call inside my website as a variable. So when the user hits a button this response (URL) opens up in a new tab.

In simple terms, I want the make use of the web url that shows up in the Chrome Console.

Here is the code I'm using

  function initiateIDV(){

  var myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");
  myHeaders.append("Authorization", "Basic xxxxxxxxxxxxx");
  
  var raw = JSON.stringify({
    "customerInternalReference": "Will's App",
    },
    "userReference": "test-app",
    "tokenLifetime": "10m"
  });
  
  var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow'
  };

  
  fetch("https://[hidden]/api/v1/accounts", requestOptions)

    .then(response => response.json())
    .then(result => console.log(result.web.href))
    .catch(error => console.log('error', error));   
   
}

View From the Chrome Console of a Successful Response

Answer 1

I think there are 2 things to check first before make sure the value show in the Console.

1. Network request. Check in the Network panel to see if the network request call successful? If it's not fix the url or the API. Learn inspect network request
2. Log the result. Log the result object first to see if it contains .web.href. If it's not, fix the API.

I create a working example from your code. Run it and you will see result. I changed the API url to a demo url

function initiateIDV(){

  var myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");
  myHeaders.append("Authorization", "Basic xxxxxxxxxxxxx");
  
  // changed body content
  var raw = JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  })
  
  var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow'
  };

  // changed url
  fetch("https://jsonplaceholder.typicode.com/posts", requestOptions)
    .then(response => response.json())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));   
}

initiateIDV();

Answer 2

Let me paraphrase your question. You want to:

1. make a POST request to an API
2. handle the API response in your JavaScript code
3. open a new tab in the user's browser, at the URL contained in the API response

And you are stuck at step 3.

What you are trying to achieve at step 3 is an effect (aka a side effect) on the user's browser.

Also, a minor remark about the terminology you used:

So when the user hits a button this response (URL) opens up in a new tab.

In your example the response is not a URL. You are calling response.json(), so the API response is JSON.

You are already performing a side effect at step 3: console.log(). A lot of stuff is a side effect. Basically everything that changes some kind of state. Printing something in the browser's console, showing an alert dialog, adding/removing CSS classes, adding/removing/altering DOM elements, are all side effects.

The side effect you want to achieve here is to open a new tab in the user's browser. In JS you can do it using this code:

window.open("https://stackoverflow.com/", '_blank').focus()

The state in your scenario is the fact that the browser currently has N tabs open, and after window.open() will have N+1 tabs open. And not only that. Opening a tab in Chrome might spawn a new operating system process (before the relationship was 1 tab => 1 process, but nowadays I don't think so, see here).