Angular2: Http.get<Object[]> map undefined

Question

I have a service defined with these imports:

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/map";
import { Subject } from "rxjs/Subject";
import { Navigation } from "../Shared/app.home";
import { Module } from "../Shared/app.home";

Then in the service I define a method:

getNavigationModules(): Observable<Navigation[]> {
    return this.http.get<Module[]>("/api/modules/getuserpreferences").map((mods) => {
        return mods.map(m => {
            var nav = new Navigation();
            nav.id = m.Id;
            nav.name = m.Name;
            nav.isFavorite = m.IsFavorite;
            nav.url = m.FriendlyUrl;
            nav.status = (m.ModuleProperties["Status"] != null && m.ModuleProperties["Status"] === "Online") ? "on" : "off" ;
            nav.type = m.Type;

            return nav;
        });
    });
}

When the method is called, I get the error that map is undefined. When calling mods.map I assume that by calling http.get that mods will be an Module array, but when I use the debugger (Chrome) I see that the debugger treats mods as an Object with a property Modules, this one being the Module array.

But if I change the code to mods.Modules.map I get an error when compiling because mods is in fact an Module[] and not an object.

What am I missing?

Thanks

But I want to return an Observable, and subscribe returns a Subscription. — Miguel Teixeira
– Miguel Teixeira, Commented Jan 29, 2018 at 11:03
I was doing it, but @JB Nizet posted a solution that works. Thx — Miguel Teixeira
– Miguel Teixeira, Commented Jan 29, 2018 at 11:33

JB Nizet · Accepted Answer · 2018-01-29 11:25:05Z

2

You're telling TypeScript that what the backend will send back is an array of Module. But it's not. It's an object, with one field named Modules, which is an array of Module. So tell the correct thing to TypeScript:

getNavigationModules(): Observable<Navigation[]> {
    return this.http.get<{Modules: Module[];}>("/api/modules/getuserpreferences").map((mods) => {
        return mods.Modules.map(m => {
            var nav = new Navigation();
            nav.id = m.Id;
            nav.name = m.Name;
            nav.isFavorite = m.IsFavorite;
            nav.url = m.FriendlyUrl;
            nav.status = (m.ModuleProperties["Status"] != null && m.ModuleProperties["Status"] === "Online") ? "on" : "off" ;
            nav.type = m.Type;

            return nav;
        });
    });
}

answered Jan 29, 2018 at 11:25

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

1 Comment

Miguel Teixeira Over a year ago

That's it :) Thx!

Collectives™ on Stack Overflow

Angular2: Http.get<Object[]> map undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related