why the variable is undefined

Question

I could access the variable 'savedCards ' from the first promise, it has some value. Inside the second promise it's undefined but the variable 'eCard' has value. Please explain me why ?

  saveCard(eCard: IEcards) {
   var savedCards: IEcards[] = [];
    this.storage.get("key").then((value) => {
      if (value.saves == undefined) {
        var saves = savedCards;
        value.saves = saves;
      }
      savedCards = value.saveCard; // have value and can be accessed
      console.log(savedCards);
    }).then((data) => {
    console.log(savedCards); // savedCards is undefined but eCard.id has value
      this.globalProvider.IsCardExist(eCard.id, savedCards).then((data) => {
        if (!data.response) {
          this.globalProvider.AddEcardToStorage("saves", eCard);
        }
      });
    });
  }

Might not be the cause of the issue, but I should point out that the 'then' function of the first promise doesn't return anything, so the next 'then' won't receive an input argument — Máté Safranka, May 04 '18 at 16:09
@MátéSafranka but i'm not using the data object and also the ecard has value. — Kumaran Raj K, May 04 '18 at 16:13
I can't really tell what you're asking, but perhaps this helps: [How to chain and share prior results with promises](https://stackoverflow.com/questions/28714298/how-to-chain-and-share-prior-results-with-promises/28714863#28714863). — jfriend00, May 04 '18 at 22:02
It is entirely reasonable that `savedCards` should be undefined and `eCard.id` should have a value. There's nothing observable in the code that would prevent either of these two data states. — Roamer-1888, May 05 '18 at 05:37

Raphael M. · Answer 1 · 2018-05-04T16:52:09.247

When you need to access the intermediate values in your chain, you should split your chain apart in those single pieces that you need. Instead of attaching one callback and somehow trying to use its parameter multiple times, attach multiple callbacks to the same promise - wherever you need the result value.

function getExample() {
    var a = promiseA(…);
    var b = a.then(function(resultA) {
        // some processing
        return promiseB(…);
    });
    return Promise.all([a, b]).then(function([resultA, resultB]) {
        // more processing
        return // something using both resultA and resultB
    });
}

[Edit]

You want to know why, and here is the answer: ES6 came with generator functions, which allow to break the execution apart in pieces at arbitrarily placed yield keywords. Those slices can be run after each other, independently, even asynchronously - and that's just what we do when we want to wait for a promise resolution before running the next step.

Your code is resolving the second promise before the first one. You can not assure that your code will work as you want by using "then()". If you want a synchronous resolution, you should go for another way.

[Edit 2]

Try to use await and see if you are able to solve your problem. More info here: http://2ality.com/2017/08/promise-callback-data-flow.html

variable savedCards is not declared inside the first promise still it can be access from it but not in second promise why. — Kumaran Raj K, May 04 '18 at 16:33
@KumaranRajK, because you assigned `savedCards = value.saveCard`, and `value` has no such property. Any amount of messing around with `saves` and `value.saves` won't change that. — Roamer-1888, May 05 '18 at 05:50

why the variable is undefined

1 Answers1