Angular2 Accessing first element in Observable of array

angular observable array
remove item from observable array angular
return value from subscribe angular 6
rxjs first
rxjs get first non null value
rxjs pipe
rxjs observable
angular return array as observable

EDIT: I finally got my problem going in a plunk at https://plnkr.co/edit/A2WipJwW9kEhhlh90xMj. If you hit the select market then press enter it will enter the marketSelectorDropDown method in the market-search.component.ts file. The problem is in the few lines below the map and subscribe never execute until the select market dropdown is clicked again. I do not understand why. Any help is greatly appreciated!

this.markets
        .map(markets => {
            debugger
            if(markets && markets.length > 0) return markets[0];
        })
        .subscribe((market: Market) => {
            debugger
            this.pick(market.name)
        });

EDIT: In the comments of the one marked as the answer is the answer. It is to use a BehaviorSubject. This allows late subscribers to get the last event sent.

Get array element in observable at particular index [html], You would need to subscribe to the observable, then access the value element of the observable array for example the first element just do:- Since filter accepts an Observable, and not an array, we have to convert our array of JSON objects from data.json() to an Observable stream. This is done with flatMap. There are many other array operations you can employ in your Observables; look for them in the RxJS API. rxmarbles.com is a helpful resource to understand how the operations work.

I was able to access the Observable's first member by using angular's async pipe.

yourComponent.html (yourObservable | async | slice :0:1)

Angular2 Accessing first element in Observable of array, I was able to access the Observable's first member by using angular's async pipe. yourComponent.html (yourObservable | async | slice :0:1)� Creates a new array with all of the elements of this array for which the provided filtering function returns true. 4. forEach() Calls a function for each element in the array. 5. indexOf() Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. 6. join()

Your example doesn't work because you are using CDN for RxJS 2, You need RxJS 5 for this. I tried to replace the CDN to version 5 and it was working just fine.

Observables Array Operations, Now every object in our array has "Dr." prepended to the value of its name property. filter will create a new array with all elements that pass the test implemented by� first: boolean: True when the item is the first item in the iterable. last: boolean: True when the item is the last item in the iterable. even: boolean: True when the item has an even index in the iterable. odd: boolean: True when the item has an odd index in the iterable. Change propagationlink

Using observables to pass values, Access Servers over HTTP An observable can deliver multiple values of any type—literals, messages, or events, depending on the context. This method is commonly used to convert an array to an observable. listeners on the document, but instead re-use the first listener and send values out to each subscriber. Note that this creates an Observable data type that contains data of number type. This illustrates the stream of data that Observables offer as well as giving us the ability to maintain integrity of the type of data we are expecting to receive. Next we call subscribe on this Observable which allows us to listen in on any data that is coming

ObservableArray, The ObservableArray module expands the Array class by providng a capability of detecting and Using shift() method to remove the first element of the array. How to store a json data in array only for particular id in angular 7 Angular- Get value from nested object in JSON angular 7 SEO change meta tags change in view html

Build Your Own Observable Part 1: Arrays, When I first started working with RxJS, I didn't know what I was doing. We simply loop over the elements in the array, and apply the projectionFn or null or 567 then we would no longer have access to Array.prototype , and� The carousel-wrapper Component the grabs the item array from the service in the "get items()" function, which is supposed to be iterated over in the ngFor on line 6 of the carousel-wrapper.component.html. The issue is that the "get items()" function seems to be returning an object [object Object] instead of an array from inside the observable.

Comments
  • When I try: ` this.markets .first(null, markets => markets[0]) .subscribe((market: Market) => { this.pick(market.name) }); ` and set a breakpoint in the subscribe method it is never hit.
  • Angular2 uses rxjs5. I added plunker. There is dummy json and it always returns name1
  • I really appreciate your example and I see how it works now, but when I take your code and apply it to mine it doesn't work. I don't understand why. Do you have any thoughts? I've included the entire ts file this time in my question.
  • I got my problem in a plunk The problem is as I have restated above the map and subscribe never fire until a new searchTerm is added to the subject.
  • Observables are lazy. Try to subscribe before emitting event plnkr.co/edit/4Oo5WZzjL6b7O8SV6IFj?p=preview
  • Thank you for your help. I realize not I was using wrong version in example, but I am still unable to get it to work in my real world situation.
  • In your Markup, try to use: (keydown.enter), no capital letters.
  • the casing of the event is not the problem. the event fires as you can in this plunk. The problem is as I have restated above the map and subscribe never fire until a new searchTerm is added to the subject.