Angular and TypeScript looping through object

Question

I am trying to learn TypeScript and Angular. I have an object that I would like to loop through and pull key:value pairs so I can create buttons dynamically in HTML. In HTML when I <<variable>> my object I get "[object Object]" as my output. When I do standard ng-repeat="o in variable" I get nothing.

My question is how do I loop through it so I can get values stored in that object.

HTML
    <div id="main_menu" class="container" role="main">
      <div class="container-fluid">
        <div class="row">
          <div class="page-header">WebJB</div>
          <div class="col-md-6">
            <div class="panel panel-default">
              <button href="#" class="panel-body btn btn-primary form-control">
                <h3 class="panel-title"></h3>
              </button>
          </div>


          <div ng-repeat="o in menu_parts"> <<--- I TRIED THIS
            {{menu_parts}}
          </div>


          </div>
        </div>
      </div>
    </div>

TypeScript

import { Component, OnInit } from '@angular/core';





@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})



export class IndexComponent implements OnInit {
  menu_parts = {
    "CRM": {
      "name": "CRM",
      "link": "/",
      "colour": "white",
      "label": "CRM"
    },
    "Admin": {
      "name": "Admin",
      "link": "/admin",
      "colour": "red",
      "label": "Admin"
    },
    "Dashboard": {
      "name": "Dashboard",
      "link": "/dashboard",
      "colour": "white",
      "label": "Dashboard"
    },
    "Settings": {
      "name": "Settings",
      "link": "/settings",
      "colour": "white",
      "label": "Settings"
    }
  }



  constructor(){
    var x = this.menu_parts;
    console.log(x);
  }

  ngOnInit() {

  }


}

Sachila Ranawaka · Accepted Answer · 2017-03-31 09:04:08Z

0

If are you using angular 2, then use ngFor instead of ngRepeat

<div *ngFor="let o in menu_parts"> 
     {{o}} 
 </div>

As for [object object] you have to use json filter to show all the content a JSON array

{{menu_parts | json}}

answered Mar 31, 2017 at 9:04

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

2 Comments

NashPL Over a year ago

My version of Angular is 2.3.1 After shuffling around and reading doc for Angular it should be <div *ngFor="let o of menu_parts"> I also change the json structure so its less nested. It worked at the end thanks for some tips :)

Sachila Ranawaka Over a year ago

@Krzysztof Buczynski no prob

Collectives™ on Stack Overflow

Angular and TypeScript looping through object

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related