unable to bind static json data to list in angular 6

Question

Am new in Angular framework. Now I create an angular web app using angular@cli.

Following are the versions I used:

Angular CLI: 6.1.3 Node: 10.15.3 OS: win32 x64 Angular: 6.1.2

Currently I am trying to bind a JSON data into list in HTML file. But it wont work,checked lot of examples, still its not working its showing an error:

"Cannot read property 'name' of undefined". I don't know why it's undefined.

HTML code:

<div>
  <ul class="list-group list-group-flush" ng-repeat="list in SERVICE_LIST">
    <li class="list-group-item">
      <a href="">{{list.name}}</a>
      <span class="active-circle">&nbsp;</span>
    </li>
  </ul>
</div>

Component Code:

@Component({
  selector: 'app-main-home',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
  constructor() { }
  SERVICE_LIST = [
    {"id":1, "name": "Service 1", "port": "8090", "ip": "10.0..4", "status": "InActive" },
    { "id":2,"name": "Service 2", "port": "8090", "ip": "10.0..4", "status": "InActive" },
    {"id":3, "name": "Service 3", "port": "8090", "ip": "10.0..4", "status": "InActive" }
  ]
  ngOnInit() {
  }
}

I spent a lot of time and tried to figure out what I am doing wrong and no idea.

I tried to add ng-repeat inside div,ul and li tags and other solutions from stack but getting the same error. If am trying to display a single variable value inside the HTML file its work fine. What was the hidden issue in this code?

ℛɑƒæĿᴿᴹᴿ · Accepted Answer · 2021-06-19 19:22:07Z

2

You should use ngFor with Angular 6, not ng-repeat:

<ul class="list-group list-group-flush" *ngFor="let list of SERVICE_LIST">
  <li class="list-group-item">
    <a href="">{{list?.name}}</a>
    <span class="active-circle">&nbsp;</span>
  </li>
</ul>

Ecample: Stackblitz Demo

edited Jun 19, 2021 at 19:22

ℛɑƒæĿᴿᴹᴿ

5,4765 gold badges42 silver badges61 bronze badges

answered Mar 16, 2019 at 12:31

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

arj Over a year ago

i have tried ng-for instead of ng-irepeat it wont work.

Sajeetharan Over a year ago

kindly check the demo

arj Over a year ago

now its work fine.thank you so much for your immediate replay

Collectives™ on Stack Overflow

unable to bind static json data to list in angular 6

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related