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));
}

Why did you name the parameter of the function lang? You are not doing anything with it. It should be .then(response => response['lang'].slice(-2)) (but it doesn't matter what you call the parameter). Parameters are only accessible in the function they are defined in. See also What is the scope of variables in JavaScript? — Felix Kling
– Felix Kling, Commented May 31, 2017 at 20:34
If I do that to the parameter, then what would happen when I try to call response['text']? This is a json dictionary with kind of {'text':'a', 'lang':'b'} — Juanvulcano
– Juanvulcano, Commented May 31, 2017 at 20:38
If by "call" you simply mean "access", it will return the string 'a'. Example: var foo = {text: 'a'}; console.log(foo['text']);. — Felix Kling
– Felix Kling, Commented May 31, 2017 at 20:38
No, I mean look at: console.log(response['text']) & console.log(food). If I do .then(response => response['lang'].slice(-2)), won't the response that is currently {'text':'a', 'lang':'bbb'} become only 'b'? @FelixKling — Juanvulcano
– Juanvulcano, Commented May 31, 2017 at 20:43
Of course. But if you don't want that then the problem is not with the parameter name but with what the function does. All the .thens are chained. The next .then callback receives whatever the previous callback returns. The parameter names having nothing to do with each other (i.e. response in .then(response => console.log(response['text']) & console.log(food)) has nothing to do with .then(response => response.json()). Again, parameters are scoped the functions. Here is a simplified example of your problem: function foo(bar) { }; foo(42); console.log(bar);... — Felix Kling
– Felix Kling, Commented May 31, 2017 at 20:47

Brett Beatty · Accepted Answer · 2017-05-31 20:51:49Z

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));
}

Sammy I. · Accepted Answer · 2017-06-03 05:35:56Z

3

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!

edited Jun 3, 2017 at 5:35

answered May 31, 2017 at 20:53

Sammy I.

2,7354 gold badges33 silver badges57 bronze badges

2 Comments

Felix Kling Over a year ago

"since response.json() returns a Promise" No, that's not the reason. .then always returns a promise. Maybe you mean that the callback returns a promise? In that case you are right.

Sammy I. Over a year ago

Got it, fixed it. Thank you!

Collectives™ on Stack Overflow

Javascript - Response undefined fetch

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related