Am using angular 6, but i don't know how to use *ngFor in html table looping. i need code for below attached screenshot. Also am given API response
{
"result": [
[
{
"title": "Title 1",
"sno": "1",
"name": "abc",
"phone": "123456",
"email": "abc#gmail.com"
},
{
"title": "Title 1",
"sno": "2",
"name": "def",
"phone": "789456",
"email": "def#gmail.com"
},
{
"title": "Title 1",
"sno": "3",
"name": "ghi",
"phone": "4561230",
"email": "ghi#gmail.com"
}
],
[
{
"title": "Title 2",
"sno": "1",
"name": "john",
"phone": "4561230",
"email": "john#gmail.com"
}
]
]
}
Use nested ngFor Loop check the example below:
<table id="spreadsheet">
<tr *ngFor="let data of result">
<td class="row-number-column">{{data[0].title}}</td>
<td *ngFor="let item of data">
<tr>
<td class="row-number-column">{{item.sno}}</td>
<td class="row-name-column">{{item.name}}</td>
<td class="row-name-column">{{item.phone}}</td>
</tr></td>
</tr>
Related
I have a table which shows the below data in the grid.Each value have a column in the table.I displayed all data by calling the api. I dont know how to display the currencies code,name,symbol,languages in the table.Can anyone help me to sort this out?
[
{
"name": "Afghanistan",
"topLevelDomain": [
".af"
],
"currencies": [
{
"code": "AFN",
"name": "Afghan afghani",
"symbol": "؋"
}
],
"languages": [
{
"iso639_1": "ps",
"iso639_2": "pus",
"name": "Pashto",
"nativeName": "پښتو"
},
{
"iso639_1": "uz",
"iso639_2": "uzb",
"name": "Uzbek",
"nativeName": "Oʻzbek"
},
{
"iso639_1": "tk",
"iso639_2": "tuk",
"name": "Turkmen",
"nativeName": "Türkmen"
}
],
"translations": {
"de": "Afghanistan",
"es": "Afganistán",
"fr": "Afghanistan"
}
}
}]
You can just do like:
<table>
<tr>
<td>{{data.name}}</td>
<td>
<span *ngFor="let item of data.currencies">
Code: {{item.code}}
Name: {{item.name}}
Symbol: {{item.symbol}}
</span>
</td>
</tr>
data is the item of your json.
This question is related to a previous one.
In my case, I would like to simply add individual elements. I have the following input.json.
{
"content": [
],
"from": {
"email": "someemail#gmail.com",
"name": "Some Name"
},
"reply_to": {
"email": "someemail#gmail.com",
"name": "Some Name"
},
"personalizations": [{
"to": [{
"email": "someemail#gmail.com"
},
{
"email": "someotheremail#gmail.com"
}]
}]
}
I would like to append the subject and template_id so that the output.json looks like below.
{
"content": [
],
"from": {
"email": "someemail#gmail.com",
"name": "Some Name"
},
"reply_to": {
"email": "someemail#gmail.com",
"name": "Some Name"
},
"personalizations": [{
"to": [{
"email": "someemail#gmail.com"
},
{
"email": "someotheremail#gmail.com"
}],
"subject": "Some subject"
}],
"template_id": "someID"
}
How would I do that with jq (including the syntax for input.json and output.json) in bash?
With simple assignment:
jq '.template_id="someID" | .personalizations[0].subject="Some subject"' input.json
The output:
{
"content": [],
"from": {
"email": "someemail#gmail.com",
"name": "Some Name"
},
"reply_to": {
"email": "someemail#gmail.com",
"name": "Some Name"
},
"personalizations": [
{
"to": [
{
"email": "someemail#gmail.com"
},
{
"email": "someotheremail#gmail.com"
}
],
"subject": "Some subject"
}
],
"template_id": "someID"
}
I have Following Json:
{
"FunctionIs": [{
"id": 1,
"name": "Test",
"Type": "A"
}, {
"id": 2,
"name": "Test2",
"Type": "A"
},{
"id": 3,
"name": "Test3",
"Type": "A"
},{
"id": 4,
"name": "Test4",
"Type": "A"
},{
"id": 5,
"name": "Test5",
"Type": "B"
},{
"id": 6,
"name": "Test6",
"Type": "B"
},{
"id": 7,
"name": "Test7",
"Type": "C"
},{
"id": 8,
"name": "Test8",
"Type": "C"
},]
}
I am populating these values through ng-repeat in my html:
<tr ng-repeat="businessdata in userObj.businessJson">
<td id="idIs">{{businessdata.id}}</td>
<td>{{businessdata.name}}</td>
</tr>
Whenever there is change in "Type" (From A to B and B to C and C to D and so on), I want to insert a new <tr> for displaying the heading(Type) only for the first time. Can anyone help in this?
Thanks!
You could create create 3 different ng-repeat each for different type.
e.g.
<tr><th>A</th></tr>
<tr ng-repeat="item in data | filter: {Type:'A'}">
<td>{{item.name}}</td>
<td>{{item.id}}</td>
</tr>
<tr><th>B</th></tr>
<tr ng-repeat="item in data | filter: {Type:'B'}">
<td>{{item.name}}</td>
<td>{{item.id}}</td>
</tr>
<tr><th>C</th></tr>
<tr ng-repeat="item in data | filter: {Type:'C'}">
<td>{{item.name}}</td>
<td>{{item.id}}</td>
</tr>
Here's a working plunker
Initially i may have some ng-table rows and i need to add one extra row when addrow button is clicked. That row should contains input boxes and also that row should belongs to that ng-table only..
table then u can push the one more object while u click the add row for incrementing the for reference https://plnkr.co/edit/vOYNz80UAaDaFq2VImfU?p=preview
HTML
<button ng-click="addrow()">Add Row</button>
<table ng-table="vm.tableParams" class="table" >
<thead>
<th> Firstname </th>
<th> Lasttname </th>
</thead>
<tr ng-repeat="user in users">
<td title="'Name'" >
<input ng-model="user.first_name" /></td>
<td title="'Age'" >
<input ng-model="user.last_name" />
</td>
</tr>
</table>
JS
$scope.users = [{
"id": 1,
"first_name": "Philip",
"last_name": "Kim",
"email": "pkim0#mediafire.com",
"country": "Indonesia",
"ip_address": "29.107.35.8"
}, {
"id": 2,
"first_name": "Judith",
"last_name": "Austin",
"email": "jaustin1#mapquest.com",
"country": "China",
"ip_address": "173.65.94.30"
}, {
"id": 3,
"first_name": "Julie",
"last_name": "Wells",
"email": "jwells2#illinois.edu",
"country": "Finland",
"ip_address": "9.100.80.145"
}, {
"id": 4,
"first_name": "Gloria",
"last_name": "Greene",
"email": "ggreene3#blogs.com",
"country": "Indonesia",
"ip_address": "69.115.85.157"
}, {
"id": 50,
"first_name": "Andrea",
"last_name": "Greene",
"email": "agreene4#fda.gov",
"country": "Russia",
"ip_address": "128.72.13.52"
}];
$scope.addrow = function() {
var obj = {
"id": "",
"first_name": "",
"last_name": "",
"email": "",
"country": "",
"ip_address": ""
}
$scope.users.push(obj)
}
Am having the following JSON data in my hand, I need to create a table, but the data is dynamic(both row header and column header & cell values).
JSON structure as follows,
{
"data": {
"vertical_header": [
"football",
"hockey"
],
"horizontal_header": [
"China",
"Brazil",
"Australia"
],
"researchDetails": [
{
"country": "brazil",
"game": "hockey",
"player": "Mr.r"
},
{
"country": "china",
"game": "hockey",
"player": "Mr.X"
},
{
"country": "china",
"game": "football",
"player": "Mr.Y"
},
{
"country": "china",
"game": "football",
"player": "Mr.Z"
},
{
"country": "brazil",
"game": "football",
"player": "Mr.M"
},
{
"country": "brazil",
"game": "football",
"player": "Mr.E"
}
]
}
}
The following is the table structure, I have to parse such JSON to construct a dynamic table like this using handlebars template. The headers are also dynamic, I have to create an array (2D/3D) so that I can construct the following,
<html>
</body>
<table border="1">
<tr><th/><th>hockey</th><th>football</th></tr>
<tr><td rowspan="2">china</td><td>Mr.X</td><td>Mr.Y</td></tr>
<tr><td></td><td>Mr.Z</td></tr>
<tr><td rowspan="2">brazil</td><td>Mr.r</td><td>Mr.M</td></tr>
<tr><td ></td><td>Mr.e</td></tr>
<tr><td>Australia</td><td></td><td/></tr>
</table>
</body>
</html