Angular2: How can i iterate each object to an observable containing object array data?

Question

Hi guys i am just starting to learn(upgrade to be specific) Angular 2, i just have some few questions. how do i iterate each object in the observable of array object?

this is what i retrieve if i go get data from "api/v1/example" already postman on this and yes its working. .

// my arrayObject
[
{
    "userID": 12,
    "username": "admin1",
    "password": "admin2"
},
{
    "userID": 13,
    "username": "admin21",
    "password": "admin32"
},
{
    "userID": 14,
    "username": "admin221",
    "password": "admin72"
},
{
    "userID": 15,
    "username": "admin451",
    "password": "admin652"
},
{
    "userID": 16,
    "username": "admin561",
    "password": "admin1222"
},
{
    "userID": 17,
    "username": "admin154",
    "password": "admin572"
},
{
    "userID": 127,
    "username": "admin1254",
    "password": "admin5721"
}
]

So as what i said before i'm just learning angular 2, so i tried to use this dummy data to test observable, but somehow in my codes i can't really iterate each data in the object, this is what i tried so far

 myData: Any[];

 constructor(private _http: HttpClient) { }

 ngOnInit() {
     this._http.get<Any[]>("api/v1/example")
         .map(data => data["username"])
         .subscribe(data => console.log(data));
 }

but i don't get any data, i even tried the filter

filter(data => data["id"] > 0)

but still fails, but if i just subscribe immediately like this i can retrieve the data

 ngOnInit() {
     this._http.get<Any[]>("api/v1/example")
         .subscribe(data => console.log(data));
 }

i use the stream in java as reference for this but i think they don't work the same, thank you in advance guys

when you check network this._http.get<Any[]>("api/v1/example") do you see 200 OK with the data as a response ? — DrNio
– DrNio, Commented Apr 5, 2018 at 7:16
check this stackblitz stackblitz.com/edit/angular-khpht3?file=app%2Fapp.component.ts now its iterating on your array — user1608841
– user1608841, Commented Apr 5, 2018 at 7:24
do you use the interceptor to add base URL? otherwise, you should add the base URL to your URL. Check out a network tab of dev tools — Dmitry Grinko
– Dmitry Grinko, Commented Apr 5, 2018 at 7:24
try this._http.get<Any[]>("api/v1/example").pipe( map(d => { return d["username"]; }) ).subscribe(data => console.log(data)); — user1608841
– user1608841, Commented Apr 5, 2018 at 7:27
i edit my question. when i don't manipulate i just immediately subscribe i can retrieve those data — cute_programmer
– cute_programmer, Commented Apr 5, 2018 at 7:28

user1608841 · Accepted Answer · 2018-04-05 08:05:58Z

1

Try below code:

import { Observable } from 'rxjs/Observable';
import { from } from 'rxjs/observable/from';
import { of } from 'rxjs/observable/of';
import { map } from 'rxjs/operators';

    this._http.get<Any[]>("api/v1/example").pipe(
          map(d => { return d["username"]; })
        ).subscribe(data => console.log(data));

refer working stackblitz

answered Apr 5, 2018 at 8:05

user1608841

2,4751 gold badge29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2: How can i iterate each object to an observable containing object array data?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related