Html [object Object] in Angular Typescript

Question

I have a todo that takes as inputs:

todo.ts:

import { TodoTag } from "./todo-tag-custom";

export class Todo {
  ...
  tags: TodoTag[];
}

todo.html

<tr *ngFor="let todo of todosFiltered()">
<td>{{todo.tags | json}}</td>

where the tags are of type: string. When I try to display it in my Html using {{ todo.tags }}, it gives me [object Object]. Additionally, when I use a pipe to convert to json using the html code above, I get:

[ { "id": 1, "tags": "Hello World", "todoID": 1 }, { "id": 2, "tags": "Not my 
tag", "todoID": 1 } ]

How can I change the {{ }} to just give me the string from the todo.tags when I iterate through my list of todos?

For reference, todosFiltered() returns the following:

todosFiltered(): Todo[] {
    if (this.filter === 'all') {
      return this.todos;
    } else if (this.filter === 'active') {
      return this.todos.filter(todo => !todo.done);
    } else if (this.filter === 'done') {
      return this.todos.filter(todo => todo.done);
    }
}

Alex D · Accepted Answer · 2021-04-14 22:56:19Z

1

Since tags is an array, you'll need something to iterate through it.

<tr *ngFor="let todo of todosFiltered()">
    <td>
        <span *ngFor="let tag of todo.tags">{{ tag.tags }}</span>
    </td>
</tr>

Here tag will be just one entry of the array of tags, for instance

{ "id": 1, "tags": "Hello World", "todoID": 1 }

answered Apr 14, 2021 at 22:56

Alex D

6924 silver badges12 bronze badges

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

5 Comments

Baiano42 Over a year ago

Not sure that that worked. The span you provided returned the following elements:

Alex D Over a year ago

Based on the code you provided, that should work. How does the data todosFiltered() returns look like? Can you console.log(todosFiltered()) somewhere in your code and show me what it looks like?

Baiano42 Over a year ago

It looks like this: todosFiltered(): TodoCustom[] { if (this.filter === 'all') { return this.todos; } else if (this.filter === 'active') { return this.todos.filter(todo => !todo.done); } else if (this.filter === 'done') { return this.todos.filter(todo => todo.done); } Where should I put the console.log(todosFiltered())? (I'm fairly new and have never used it before...) (See edited code above)

Alex D Over a year ago

My confusion comes from export class Todo { ... tags: TodoTag[]; } and then "where the tags are of type: string". You say tags is string, but the code you provided has it as an array in class Todo. So if todosFiltered is returning multiple Todos, then tags is an array. So you have to further iterate on tags with an *ngFor and then get the "tags" property on Todo.tags to get the string.

Alex D Over a year ago

So your todosFiltered method returns an array of Todos, which from your code looks like: [ { tags: [ { "id": 1, "tags": "Hello World", "todoID": 1 } ] } ], so you see how there are 2 arrays? Then you need 2 *ngFors

Collectives™ on Stack Overflow

Html [object Object] in Angular Typescript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related