I am trying to loop the nested assignee object in my Angular template. 1st code block is the JSON snippet of the nested object(assignee). 2nd code block is the template of my Angular workspace where I want to display the nested object assignee.
{
"ticket": 12,
"title": "Ticket#2",
"description": "Ticket#2",
"severity": "Normal",
"status": "New",
"assignee": {
"id": 26,
"employeeNumber": 101,
"firstName": "Amy",
"middleName": "Devie",
"lastName": "Iliya",
"department": "HR"
},
"watchers": [],
"empNum": null
},
<p *ngFor="let ticket of tickets">
{{ ticket.assignee }}
</p>
The result of this is when I run it is always [object Object]. Also, how I access only the Id in the assignee object?
You can access nested objects withe the following syntax.
<p *ngFor="let ticket of tickets">
Name: {{ ticket.assignee.firstName }}
<br />
Department: {{ ticket.assignee.department }}
</p>
Related
How to add redirect link to particular text in JSON object. For example,
My json attribute name is "submissionFailed" and the value is "Submission Failed. Please Contact Company for more information"
Here I need to add redirect link "www.google.com" only to the "Contact Company" in the value.
Please check my sample JSON :
{"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New"},
{"value": "Open"},
{"value": "Close"}
]
},
"submissonFailed" : "Submission Failed. Please Contact Company for more information"
}}
How to add link like in json file.
This is not something you add to DynamoDB, this is something you need to do while rendering the data on your client. For example of it's a html webpage using handlebars it would look like:
{"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New"},
{"value": "Open"},
{"value": "Close"}
]
},
"submissonFailed" : "Submission Failed.",
"url": "https:google.com",
"company": "contact company"
}}
.
<p>{{ item.submissionFailed }} <a href={{ item.url }}> {{ item.company }}</a>.</p>
I am using JSON-server for my data and want to display it in my Vue3 template. At the moment, I am able to display all of the data from the JSON file except for the images, which I know I have to read differently. I found this previously posted question How to make Vue display an image from a local path from json file and I was trying to use it to figure out my question. This what I have so far. The SingleOrder.vue component.
<template>
<div class="post">
<img src="{{order.image}}" alt="" />
<h3>
{{ order.title }} <span>{{ order.price }}</span>
</h3>
</div>
</template>
<script>
export default {
// our prop from the PostList component
props: ["order"],
setup() {},
};
</script>
<style></style>
And the db.json file.
{
"orders": [
{
"id": 1,
"image": "require('..assets/coffeeIcon.png')",
"title": "Americano",
"price": 2000
},
{
"id": 2,
"image": "./src/assets/coffeeIcon.png",
"title": "Iced Americano",
"price": 2000
},
{
"id": 3,
"image": "../src/assets/coffeeIcon.png",
"title": "Latte",
"price": 2500
},
{
"id": 4,
"image": "../src/assets/coffeeIcon.png",
"title": "Decaf",
"price": 3000
},
{
"id": 5,
"image": "../src/assets/coffeeIcon.png",
"title": "Tea",
"price": 1500
}
]
}
I tried fooling around with the paths for the images, hoping there was a mistake in the json file rather than the template. Any help would be gratefully appreciated.
How can I display "empName" and other details of this JSON in my table component in loop?
I'm using a third party API which provides a nested JSON object in return when I send employerID to the API URL.
After subscribing I'm storing the response in a var "AllPostedJobs"
{
"status": "All Jobs",
"result": [
{
"_id": "5c90fd3cfc7f3b0017803319",
"job_title": "Web Designer",
"job_desc": "test description ...",
"location": "Mangalore",
"experiance": "Freshers",
"job_type": "Full-Time",
"salary_package": "3L",
"job_keywords": "Photoshop, Illustrator",
"email_id": "hr#shreemithra.com",
"employerID": "5c7e99c2a7a9eb00174de2b2",
"company_name": "Shreemithra Designs",
"AppliedStudentDetails": [
{
"_id": "5c9393c1a918d60017de7e55",
"empName": "Anup",
"empID": "5c939375a918d60017de7e53",
"job_title": "Web Designer"
}
],
"__v": 1
},
{
"_id": "5c913570cb78a100177ab23a",
"job_title": "Full Stack Developer",
"job_desc": "htjhsv dhsd jh jds fjshgdfkhsdmhfd;lw eiwiwemsd. This is a sample job description.",
"location": "Pune",
"experiance": "2 Years",
"job_type": "Part-Time",
"salary_package": "8L - 10L PA",
"job_keywords": "Angular, Node JS, React, HTML5. CSS3",
"email_id": "info#shreemithra.com",
"employerID": "5c7e99c2a7a9eb00174de2b2",
"company_name": "Shreemithra Designs",
"AppliedStudentDetails": [
{
"_id": "5c9393c9a918d60017de7e56",
"empName": "Anup",
"empID": "5c939375a918d60017de7e53",
"job_title": "Full Stack Developer"
},
{
"_id": "5ca60fa5ba17730017182ca8",
"empName": "Amit Pateriya",
"empID": "5c7795acfd39640017ca4c37",
"job_title": "Full Stack Developer"
}
],
"__v": 2
}
]
}
The simplest way is when you receive data from api then send it to a
function then apply multiples loop alter your data by add keys in
front of data and that values for example
var data = [{"id":1, "name":"smith","applicant":{"roll": 32,"class":10}}];
data[0].applicantRoll = data[0].applicant.roll;
data[0].applicantClass = data[0].applicant.class;
now you can apply *ngfor easily, try this.
You can bind display data by binding controls in an HTML template to properties of your component.
The easiest way to display a component property is to bind the property name through interpolation. With interpolation, you put the property name in the view template, enclosed in double curly braces:{{AllPostedJobs.status}}.
<div id="result-container" *ngFor="let record of AllPostedJobs.result">
<another-component [record]= "record"></another-component>
</div>
Or depending on your need you can hand over entire result data to another-component.
Now your another-component, should have #Input defined to handle the incoming data:
export class AnotherComponent {
#Input() record: Array<any>;
In your another-component template:
<div *ngFor="let student of record?.AppliedStudentDetails">
<span>{{student.empName}}</span>
<span [innerText]="student.job_title"></span>
</div>
I am working in Angular 6.0 and I have ran into the issue of using HttpClient to iterate through my JSON data I am reading in from a local file in my assets folder.
Here is my JSON Data
[{
"configKey": [{
"user1": [{
"subconfig": [{
"name": "program Id",
"type": "String"
}, {
"name": "brand ID",
"type": "String"
}]
}],
"user2": {
"subconfig": [{
"name": "program Id",
"type": "String"
}, {
"name": "brand ID",
"type": "String"
}]
},
"user3": {
"subconfig": [{
"name": "program Id",
"type": "String"
}, {
"name": "brand ID",
"type": "String"
}]
}
}]
}]
Here is my current code in the component ts file
rule:Array<any> =[];
loadinfo(){
this.http.get<any[]>("assets/test.json")
.subscribe(data=>{
this.rule = data;
})
}
Here's what I have in the HTML File
<label>
<select>
<option *ngFor="let og of rule">
{{og.configKey}}
</option>
</select>
</label>
In my expected end goal, I should be able to populate a dropdown list based on a previous selection. (eg. I select user1, the list should populate with the 'names' in it's user tree in the JSON). However, I have not gotten to this part and would just like help with simply populating a dropdown list with names from my JSON tree.
From my previous research, I understand that HttpClient only returns Objects and that *ngFor only works on arrays. I have tried to change the object to an array, but my result is only another error that states that ngFor can only iterate through objects. Is there a way to change my entire nested JSON object to Array?
For what it's worth, here is my JSON Data in console
Console JSON
How would I go about making my data iterable by *ngFor and how would I navigate to the names? I would assume in the html it would be something like this? :
//TEST CODE????
<label>
<select>
<option *ngFor="let og of rule">
{{og.configKey.user1.subconfig.name}}
</option>
</select>
</label>
Any sort of help would be appreciated! Thanks in advance
You can iterate objects by keyvalue pipe. (https://angular.io/api/common/KeyValuePipe)
You can do it like this:
<div *ngFor="let config of res | keyvalue">
<div>{{config.key}}</div>
<div *ngFor="let users of config.value">
<div *ngFor="let user of users | keyvalue">
<div>{{user.key}}</div>
<div *ngFor="let subcfgs of user.value | keyvalue">
<div>{{subcfgs.key}}</div>
<div *ngFor="let subcfg of subcfgs.value">
<div>name: {{subcfg.name}}</div>
<div>type: {{subcfg.type}}</div>
</div>
</div>
</div>
</div>
</div>
stackblitz : https://stackblitz.com/edit/angular-ph76ya
I have edited your JSON.
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
}
]
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
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
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 }}
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>
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>