Angular2 get data from Odata controller

Question

First time question... Long time reader/lurker... I am trying to learn angular2 but I am having some trouble with getting data from an odata controller. I have a simple angular 2 application, where I am trying to load some data returned from an odata controller, in to a list element in html.
Here is my angular2 interface:

interface Menu {
    id: number;
    name: string;
    route: string;
    decorator: string;
    description: string;
    OldTableId: string;
    TableName: string;
}

Here is my typescript/Angular 2 component file:

    import {
    ROUTER_DIRECTIVES,
    Http,
    Observable,
    MenuService,
    Component, OnInit
} from './index.ts';

@Component({
    selector: 'sidebar-menu',
    template: require('./sidebar-menu.html'),
    directives: [...ROUTER_DIRECTIVES],
    providers: [MenuService]
})
export class SidebarMenu {
    public menus: Menu[];
    public menu2s: Menu[];
    constructor(private _menuService: MenuService) {
    }
    ngOnInit() {
        this._menuService.getMenus()
            .subscribe((menus) => {
                this.menus = menus;
                console.log(val);
               },
            (err) => {
                console.log(err);
                }
            );
   }
}

Here is my angular2 service (menuService) called in the init of the angular 2 component:

import { Http, Response, Observable, Injectable} from './index.ts'

@Injectable()
export class MenuService {

    constructor(private _http: Http) { }

    getMenus() {
        //return this._http.get('/api/Menu/Menus') - api works fine
        return this._http.get('http://localhost:64157/odata/OldTables')
            .map((response: Response) => response.json())

            .catch(this._handleError);

    } _handleError(err: any) {
        //TODO - Give user a nice error message.
        console.log(err);
        return Observable.throw(err);
    };
    }

}

And my HTML:

<ul class='nav navbar-sidebar'>
    <li>test</li>
    <li>
        <a [routerLink]="['/home']" class="router-link" [routerLinkActive]="['active']">
            <span class='glyphicon glyphicon-home'></span> Home
        </a>
    </li>
    <li *ngFor="let menu of menus" >
        <a [routerLink]="menu.name" class="router-link" [routerLinkActive]="['active']">
            <span class='glyphicon glyphicon-th-list {{menu.decorator}}'></span> {{menu.name}}
        </a>
    </li>
</ul>

My issues is that when I use an API controller this works. Now I have created an odata controller. I can see the data in the browser when it is logged to the console at console.log(val); from my component's init. But I cannot get this on the screen. Ultimatly I want to use the data in the <li *ngFor="let menu of menus" > of the html page. How do I get the odata controller data rendered? Everything I have read references web api.

Edit: I am adding a sample of the data that my odata controller is returning.

   {
      "odata.metadata":"http://localhost:64157/odata/$metadata#OldTables","value":[
        {
          "[email protected]":"http://localhost:64157/odata/OldTables(15252)/OldColumns","OldTableId":15252,"TableName":"addbook"
        },{
          "[email protected]":"http://localhost:64157/odata/OldTables(15253)/OldColumns","OldTableId":15253,"TableName":"adj01"
        },{
          "[email protected]":"http://localhost:64157/odata/OldTables(15254)/OldColumns","OldTableId":15254,"TableName":"allcmy201"
        },{
          "[email protected]":"http://localhost:64157/odata/OldTables(15255)/OldColumns","OldTableId":15255,"TableName":"allfut"
        }
      ]
    }

Jay Culpepper · Accepted Answer · 2016-08-10 21:36:46Z

2

My code above worked I just forgot to reference the "value" of the returned data. Updated TS/Component code:

export class SidebarMenu {
    public menus: Menu[];

    constructor(private _menuService: MenuService) {
    }
    ngOnInit() {
        this._menuService.getMenus()
            .subscribe((menus) => {
                this.menus = menus.value;
                console.log(val.value[0]);
               },
            (err) => {
                console.log(err);
                }
            );
   }
}

Then modified my html to the following:

<ul>
    <li *ngFor="let menu of menus">
        <a [routerLink]="menu.OldTableId" class="router-link" [routerLinkActive]="['active']">
            <span class='glyphicon glyphicon-th-list {{menu.OldTableId}}'></span> {{menu.TableName}}
        </a>
    </li>
</ul>

answered Aug 10, 2016 at 21:36

Jay Culpepper

57712 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Angular2 get data from Odata controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related