Angular 6 json object pipe not display data

Question

I have an html file that is trying to display tasks for a project. The tasks are contained in an ref array inside the project schema that I get from MongoDB. When I try the code below:

<div class="card-body">
    {{project.taskName | json}}
</div>

It displays the entire task object like this

[ { "project": [ "5bd973fe33bd3a09586c8eb2" ], "user": [], "_id": "5bd9776833bd3a09586c8eb3", "taskName": "Test task", "taskDescription": "This task is a test", "__v": 0 } ]

If I try {{project.task.taskName | json }} nothing gets displayed. How do I get the html to display the tasks name and description? Thanks!

EDIT: the json payload I receive

[
    {
        "team": [],
        "task": [
            {
                "project": [
                    "5bd973fe33bd3a09586c8eb2"
                ],
                "user": [],
                "_id": "5bd9776833bd3a09586c8eb3",
                "taskName": "Test task",
                "taskDescription": "This task is a test",
                "__v": 0
            }
        ],
        "_id": "5bd973fe33bd3a09586c8eb2",
        "projectName": "Test project",
        "projectDescription": "This is a test project",
        "__v": 1
    }
]

Sunil · Accepted Answer · 2018-10-31 10:44:10Z

1

The best would be to have a small function which gets only the desired properties like taskName and taskDescription.

 getCustomProjects() {
    return this.project.map(p => {
      return {
        name: p.taskName,
        taskDescription: p.taskDescription
      }
    });
  }

html

<div class="card-body">
    {{ getCustomProjects() | json}}
</div>

Note : You can call getCustomProjects and construct new array if in ts instead of html.

Working demo is here - https://stackblitz.com/edit/angular-2chhvd

answered Oct 31, 2018 at 10:44

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

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

Comments

Florian Bastianelli · Accepted Answer · 2018-10-31 11:02:30Z

0

I suspect the issue comes from the fact that your payload (project) is an array.

This should work fine: {{ project.taskName[0].taskName | json }}

Hope that helps

edited Oct 31, 2018 at 11:02

answered Oct 31, 2018 at 10:46

Florian Bastianelli

2121 silver badge6 bronze badges

3 Comments

Sharkows Abel Over a year ago

Thanks for your help mate but still nothing is returned. Any other things I could try?

Florian Bastianelli Over a year ago

Oh wait you display project.taskName and it gives you the array ? Then maybe {{ project. taskName[0].taskName | json }} Maybe the payload structure could be improved. Would you have the related class ? It could help understand the model.

Sharkows Abel Over a year ago

This works perfectly! Thanks so much for your help mate

Nirnay Kulshreshtha · Accepted Answer · 2018-10-31 10:36:06Z

0

You can pipe object using JSON {{project.task | json }}. In your case project.task.taskName is not a object it is a string. So there is no need of pipe JSON. You can simply use {{ project.taskName }}

answered Oct 31, 2018 at 10:36

Nirnay Kulshreshtha

731 silver badge7 bronze badges

1 Comment

Nirnay Kulshreshtha Over a year ago

Thanks for payload. Here task is not a object, it is an array, so you have to iterate over it using *ngFor

Sajeetharan · Accepted Answer · 2018-10-31 10:41:40Z

0

You should not use |json with dot operator, if you need to print the whole object, use

<div class="card-body">
    {{project | json}}
</div>

if you need taskName

<div class="card-body">
    {{project.taskName}}
</div>

EDIT

You need to access using index since it is an array

   <div class="card-body">
        {{project[0].taskName}}
   </div>

edited Oct 31, 2018 at 10:41

answered Oct 31, 2018 at 10:35

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

2 Comments

Sharkows Abel Over a year ago

It still returns nothing when I try it

Sajeetharan Over a year ago

It should work, the marked answer and mine has no difference

Abhishek · Accepted Answer · 2018-10-31 11:14:43Z

0

This code is work for me

array

abc = [
    {
      'team': [''],
      'task': [
        {
          'project': [
            '5bd973fe33bd3a09586c8eb2'
          ],
          'user': [''],
          '_id': '5bd9776833bd3a09586c8eb3',
          'taskName': 'Test task',
          'taskDescription': 'This task is a test',
          '__v': 0
        }
      ],
      '_id': '5bd973fe33bd3a09586c8eb2',
      'projectName': 'Test project',
      'projectDescription': 'This is a test project',
      '__v': 1
    }
    ];

html

<div class=="card-body">
  {{abc[0].task[0].taskName}}
</div>

answered Oct 31, 2018 at 11:14

Abhishek

1,7782 gold badges16 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular 6 json object pipe not display data

5 Answers 5

Comments

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related