Angular 6 json object pipe not display data - html

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
}
]

Answer 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

Answer 2

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

Answer 3

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 }}

Answer 4

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>

Answer 5

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>