Javascript - Response undefined fetch

Question

I'm having some issues understanding variables and functions using fetch. I'm trying to pass the value of response from

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

to

.then(lang => response['lang'].slice(-2)

But I am getting the undefined variable response error, so I'm not referencing the variable correctly. What's the correct way of calling it?

Also I want to call both console logs, the piece of code below currently does that but I don't think I should be overwriting response function, can I call a function without arguments or the commands by themselves?

.then(response => console.log(response['text']) & console.log(food))

console.log(response['text']) & console.log(food)

  fetch("https://localhost:8000", {method:"POST", body:fd})
  .then(response => response.json())
  .then(lang => response['lang'].slice(-2))
  .then(food => "Temporary")
  .then(function detectType(lang) {
  switch(lang) {
    case 'abc':
        food = "Bananas";
        break;
    case 'def':
        food = "Apples";
        break;
    default:
        food = "Bananas";
        break;
   }})
  .then(response => console.log(response['text']) & console.log(food))
  .catch(err => console.error(err));
}

Answer 1

If I'm understanding what you want to do, keep in mind that the return value of one function is the state received by the next function. So you'd be looking to do something more like this:

fetch("https://localhost:8000", {method:"POST", body:fd})
  .then(response => response.json())
  .then(response => {
    response['lang'] = response['lang'].slice(-2);
    return response;
  })
  .then(response => {
    response['food'] = "Temporary";
    return response;
  })
  .then(function detectType(response) {
    switch(response['lang']) {
      case 'abc':
          response['food'] = "Bananas";
          break;
      case 'def':
          response['food'] = "Apples";
          break;
      default:
          response['food'] = "Bananas";
          break;
     }
    return response;
  })
  .then(response => {
    console.log(response['text']);
    console.log(response['food']);
  })
  .catch(err => console.error(err));
}

Answer 2

Regarding fetch(), remember that it is very 'Promise heavy'.

fetch("https://localhost:8000", {method:"POST", body:fd}) returns a Promise, which you handle with the first then()

then(response => response.json()) returning response.json() will give you the state of response.json() in the next .then(). So, you have access to the JSON representation of the response by the next then().

Let's take a look at how it should look:

fetch("https://localhost:8000", {method:"POST", body:fd}) 
  .then(response => response.json()) 
  .then(jsonResp => jsonResp['lang'] ); 

By that last line, you can check the JSON object and its keys without going down a Promise chain. If you want to check the lang attribute, you have access to it the way it's seen on the example.

Hope this helps!