Ruday Ruday - 1 year ago 68
AngularJS Question

Display data from a json object array

I am unable to loop through a json object array and display all data in separate divs.
Currently just using some mock data.


import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import { Team } from './team';

export class TeamService {
private _url = ""
constructor(private _http: Http){


getPost() : Observable<Team[]>{
return this._http.get(this._url)
.map(res => res.json());

createPost(post: Team){
return, JSON.stringify(post))
.map(res => res.json());


import { Component, OnInit } from '@angular/core';
import { TeamService } from '../team.service';

selector: 'About',
templateUrl: './about.component.html',
providers: [TeamService]
export class AboutComponent implements OnInit{


isLoading = true;

constructor(private _teamService: TeamService){
/*this._teamService.createPost({userId: 1, title: "a", body: "b"});*/


var text = "";
var i = 0;

.subscribe(post => {

this.isLoading = false; = post;


export interface Team{
userId: number;
id?: number;
title: string;
body: string;


<div *ngIf="isLoading">Getting data....</div>

<div let displayData of data>

<p> {{ }}</p>


I know I am missing something, but i can't figure out what.

Any tips would be greatly appreciated.

Answer Source

use the *ngFor structureal directive like:

<div *ngFor="let displayData of data">

    <p> {{ }}</p>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download