Explaining Observables

buttonClick.js

Observable.fromEvent(this.myButton,'click').subscribe((event) => 
   /* do something in response to the click here */
);

debounce.js

Observable.fromEvent(this.myInput,'change').debounceTime(250).subscribe((event) =>
   /* do something in response to the input field change here */
);

functionChaining.js

var someList = [
   {id: 1, firstName: ‘Dave’, lastName: ‘Bush’},
   {id: 2, firstName: ‘John’, lastName: ‘Doe’},
   …
];
newArray = someList.filter(function(item) {
   return item.lastName.startsWith(‘B’);
}.map(function(item) {
   return {fullName: item.firstName + ‘ ‘ +
       item.lastName, id: item.id};
});

get.ts

this.httpClient.get<TypeInfo>('/api/get-data')
   .subscribe((x: TypeInfo) => /* do something with the data */ );

getCatch.ts

this.httpClient.get<TypeInfo>(‘/api/get-data’)
   .catch(err: Error => /* do something with the error */)
   .subscribe((x: TypeInfo) => /* do something with the data */);

getRetry.ts

this.httpClient.get<TypeInfo>(‘/api/get-data’)
   .retry(3)
   .catch(err: Error => /* do something with the error */)
   .subscribe((x: TypeInfo) => /* do something with the data */);

oldStyle.js

var someList = [
   {id: 1, firstName: ‘Dave’, lastName: ‘Bush’},
   {id: 2, firstName: ‘John’, lastName: ‘Doe’},
   …
];
var i;
var newArray = []; 
for(i = 0; i < someList.length; i++) {
   var item = someList[i];
   newArray.push({fullName: item.firstName + ‘ ‘ +
       item.lastName, id: item.id});
}

oldStyleFilter.js

var someList = [
   {id: 1, firstName: ‘Dave’, lastName: ‘Bush’},
   {id: 2, firstName: ‘John’, lastName: ‘Doe’},
   …
];
var i;
var newArray = []; 
for(i = 0; i < someList.length; i++) {
   var item = someList[i];
   if(item.lastName.startsWith(‘B’) {
       newArray.push(item);
   }
}

oldStyleNoChain.js

var someList = [
   {id: 1, firstName: ‘Dave’, lastName: ‘Bush’},
   {id: 2, firstName: ‘John’, lastName: ‘Doe’},
   …
];
var newArray = [];
someList.map(function(item) {
   if(item.lastName.startsWith(‘B’)) {
       newArray.push({fullName: item.firstName + ‘ ‘ +
           item.lastName, id: item.id});
   }
});

usingFilter.js

var someList = [
   {id: 1, firstName: ‘Dave’, lastName: ‘Bush’},
   {id: 2, firstName: ‘John’, lastName: ‘Doe’},
   …
];
newArray = someList.filter(function(item) {
   return item.lastName.startsWith(‘B’);
};

usingMap.js

var someList = [
   {id: 1, firstName: ‘Dave’, lastName: ‘Bush’},
   {id: 2, firstName: ‘John’, lastName: ‘Doe’},
   …
];
var newArray = someList.map(function(item) {
   return {fullName: item.firstName + ‘ ‘ +
       item.lastName, id: item.id};
});

usingReducer.js

var numbers = [1, 2, 3];
var total = numbers.reduce(function(sum, item) {
   return sum + item;
}, 0);