Binding data from json to unknown size array

Question

Trying to bind data from a json to models, and can't figure it out. It displays [object Object],[object Object],[object Object]. Trying {{post.comments.text}} shows nothing..

JSON

{
"id": "507033622",
"author": {
    "user": 2,
    "name": "test",
    "avatar": null,
    "bio": "",
    "banned": false
},
"subscribed": true,
"created": "2017-06-21T19:45:46.289429Z",
"active": true,
"text": "Lolololol",
"comments": [
    {
        "id": 1,
        "author": {
            "user": 1,
            "name": "wyldbot",
            "avatar": null,
            "bio": "",
            "banned": false
        },
        "created": "2017-06-24T14:06:28.861325Z",
        "text": "Comment"
    },
    {
        "id": 2,
        "author": {
            "user": 1,
            "name": "wyldbot",
            "avatar": null,
            "bio": "",
            "banned": false
        },
        "created": "2017-06-24T14:30:43.382514Z",
        "text": "More data"
    },
    {
        "id": 3,
        "author": {
            "user": 1,
            "name": "wyldbot",
            "avatar": null,
            "bio": "",
            "banned": false
        },
        "created": "2017-06-24T14:30:53.115687Z",
        "text": "More data"
    }
]
}

post.ts:

import { Injectable } from '@angular/core';
import {Author} from "./author";
import {Comment} from "./comment";

@Injectable()
export class Post {
id:number;
author:Author;
subscribed:boolean;
created:string;
active:boolean;
text:string;
comments:Comment[];

constructor(id:number, author:Author, subscribed:boolean, created:string, active:boolean, text:string, comments:Comment[]) {
    this.id = id;
    this.author = author;
    this.subscribed = subscribed;
    this.created = created;
    this.active = active;
    this.text = text;
    this.comments = comments;
}


public static getPosts():Post{
    return new Post(0, null, null, "", null, "",null);
}

}

comment.ts

import { Injectable } from '@angular/core';
import {Author} from "./author";

@Injectable()
export class Comment {
id:number;
author:Author;
created:string;
text:string;

constructor(id:number, author:Author, created:string, text:string) {
    this.id = id;
    this.author = author;
    this.created = created;
    this.text = text;
}


public static createBlankComment():Comment{
    return new Comment(0, null, "", "");
}

}

home.component.html

<h3>Post ID: {{post.id}}</h3>
<p>Post Owner ID: {{post.author.user}}</p>
<p>Post Owner Name: {{post.author.name}}</p>
<p>Post Owner Avatar: {{post.author.avatar}}</p>
<p>Post Owner Bio: {{post.author.bio}}</p>
<p>Is Post Owner Banned: {{post.author.banned}}</p>
<p>Subscribed: {{post.subscribed}}</p>
<p>Created: {{post.created}}</p>
<p>Active: {{post.active}}</p>
<p>Text: {{post.text}}</p>
<p>Comments: {{post.comments}}</p>

post.comments is an array. Does something like post.comments[0].text work for the first comment? — Rob Zuber
– Rob Zuber, Commented Jun 25, 2017 at 23:43
Yes it does, how would I go about looping through the array and displaying it. The array is dynamic and can change — Cameron Gilbert
– Cameron Gilbert, Commented Jun 25, 2017 at 23:47

Nehal · Accepted Answer · 2017-06-26 01:12:09Z

1

Since post.comments is an array, use *ngFor directive to loop over it.

<div *ngFor="let comment of post.comments">
    <div>Text: {{ comment.text }}</div>
</div>

I have covered other cases of accessing data from your json in this plnkr.

<div *ngFor="let comment of post.comments">
    <p>Comment: {{ comment | json}}</p>
    <p>Author: {{ comment.author | json}}</p>
    <p>Author Name: {{ comment.author.name }}</p>
    <p>Text: {{ comment.text }}</p>
</div>

answered Jun 26, 2017 at 1:12

Nehal

13.3k4 gold badges48 silver badges59 bronze badges

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

2 Comments

Cameron Gilbert Over a year ago

Thanks that worked for me, whats the significance of this line: <p>Comment: {{ comment | json}}</p>

Nehal Over a year ago

Since 'comment' represents each object in the 'post.comments' array, {{ comment | json }} allows the view to parse each 'comment' object to string using 'json' pipe and display it in UI. Here's the documentation of 'json' pipe, angular.io/api/common/JsonPipe

Collectives™ on Stack Overflow

Binding data from json to unknown size array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related