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.
Related
I'm trying to inject the following payload into Responsys via API:
{
"mergeTriggerRecordData": {
"mergeTriggerRecords": [
{
"fieldValues": [
"jose#test.cl"
],
"optionalData": [
{
"name": "ORDER_ID",
"value": "550199999998"
},
{
"name": "customerFirstName",
"value": "Jose"
},
{
"name": "ORDER_DETAIL",
"value": [
{
"sku": "ble",
"price": "$29000",
"description": "polera"
},
{
"sku": "ble2",
"price": "$9000",
"description": "calcetines"
},
{
"sku": "ble3",
"price": "$39000",
"description": "poleron"
}
]
}
]
}
],
"fieldNames": [
"EMAIL_ADDRESS_"
]
},
"mergeRule": {
"htmlValue": "H",
"matchColumnName1": "EMAIL_ADDRESS_",
"matchColumnName2": null,
"optoutValue": "O",
"insertOnNoMatch": true,
"defaultPermissionStatus": "OPTIN",
"rejectRecordIfChannelEmpty": "E",
"optinValue": "I",
"updateOnMatch": "REPLACE_ALL",
"textValue": "T",
"matchOperator": "NONE"
}
}
Which gives me the data model where I can iterate over the details of the order.
Sadly, this isn't being interpreted correctly by the RPL,
I'm calling the iteration code as:
Hola ${DynamicVariable.customerFirstName}
<br>Probando arreglo dificil
<p>Este es el arreglo:
</p>
<br>API_1: ${DynamicVariable.ORDER_ID}
<br>
<#list ORDER_DETAIL as line_detail>
<p>SKU: {DynamicVariable.line_detail.sku}
</p>
<p>PRICE: {DynamicVariable.line_detail.price}
</p>
<p>DESCRIPTION: {DynamicVariable.line_detail.description}
</p>
</#list>
Appreciate any help/guidance of why this isn't working as intended.
Below is the HTTP get request response. how can i print same in view using *ngFor . iam trying to print single object print like data[0].value1 in console. it returns undefined. inside data array 3 JSON Objects. and some arrays also
Any help much appreciated...
getEmp(){
this.EmpService.getAccounts().subscribe((res : any[])=>{
this.products = JSON.stringify(res);
});
.
{
"data": [
{
"value1": "3546786908765432",
"category": "Clothing (Brand)",
"category_list": [
{
"id": "001",
"name": "Clothing (Brand)"
},
{
"id": "39324324230",
"name": "Boutique Store"
},
{
"id": "12342324324",
"name": "Website"
}
],
"name": "wqeqws",
"id": "qwsqwsq w",
"tasks": [
"ANALYZE",
"ADVERTISE",
"MODERATE",
"CREATE_CONTENT",
"MANAGE"
]
},
{
"value1": "111-9=-09876543",
"category": "Education",
"category_list": [
{
"id": "23456",
"name": "Education"
}
],
"name": "sdcsfcsdfvsd",
"id": "111111111111",
"tasks": [
"ANALYZE",
"ADVERTISE",
"MODERATE",
"CREATE_CONTENT",
"MANAGE"
]
}
],
"paging": {
"cursors": {
"before": "dsfsds",
"after": "sdfsfs"
}
}
}
this.products = res.data;
In your page
< *ngFor="let item of products >
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>
I am trying to create a datagrid - or lets call it a table in angular2 using a JSON object to create it. The problem I have is that I dont know how many columns will be in table nor do I know the names or those columns.
From my current understanding i need to define what a row looks like in order to render the cells, but if I dont know what the columns are called then I cant render the row!
Maybe an example will make things more clear...
Below are two examples of JSON that I will need to render in the same table...
Example 1
{
"table": {
"columns": {
"column": [
{
"-articleColumn": "articleCode",
"-label": "Article Code ",
"-fCode": "f9",
"-value": "column1"
},
{
"-articleColumn": "Article.trend",
"-label": "Trend ",
"-fCode": "f25",
"-value": "column2"
}
]
},
"rows": {
"row": [
{
"column1": "articleCode",
"column2": "Avg"
},
{
"column1": "151110103",
"column2": "100"
},
{
"column1": "151110109",
"column2": "101"
},
{
"column1": "151110111",
"column2": "102"
},
{
"column1": "151110117",
"column2": "103"
}
]
}
}
}
Example 2
{
"table": {
"columns": {
"column": [
{
"-articleColumn": "articleCode",
"-label": "Article Code ",
"-fCode": "f9",
"-value": "column1"
},
{
"-articleColumn": "Article.trend",
"-label": "Trend ",
"-fCode": "f25",
"-value": "column2"
}
{
"-averageDemand": "Article.averageDemand",
"-label": "Average Demand ",
"-fCode": "f564",
"-value": "column3"
},
{
"-warehouse": "Article.warehouse",
"-label": "Warehouse ",
"-fCode": "f295",
"-value": "column4"
}
]
},
"rows": {
"row": [
{
"column1": "151110103",
"column2": "100"
"column3": "500"
"column4": "TOT"
},
{
"column1": "151110109",
"column2": "101"
"column3": "46"
"column4": "TOT"
},
{
"column1": "151110111",
"column2": "102"
"column3": "16"
"column4": "SEL"
},
{
"column1": "151110117",
"column2": "103"
"column3": "112"
"column4": "SEL"
}
]
}
}
}
Here are my Components...
The Table:
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<tbody>
<app-field-mapping-row [rowData]="row" *ngFor="let row of rows"></app-field-mapping-row>
</tbody>
</table>
app-field-mapping-row:
NOTE This is where I get stuck!
<tr>
<td class="mdl-data-table__cell--non-numeric" *ngFor="let cell of rowData" >
{{cell}}
</td>
</tr>
How can I create the correct number of cells and how do I loop through the children of the rows when each one is named differently... If all children were called cell then I would have an array to use, but I wont know what they are called.
I haven't been able to find any method to turn the 'children' of a JSON node into and array...
eg. *ngFor="let cell of rowData.children()"
Help as always is greatly appreciated.
Here is how i have done it in AngularJS, but you will get the point.
Your second JSON is missing a lot of comma's
This is my view:
<table class="table table-striped table-hover display" style="cellspacing:0;width:100%">
<thead>
<tr>
<th ng-repeat="columns in tableData.table.columns.column">
{{columns.label}}
</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="row in tableData.table.rows.row">
<td ng-repeat="(key,val) in row">{{val}}</td>
</tr>
</tbody>
</table>
This is your JSON, with me just removing - in label , and fixing JSON format
{
"table": {
"columns": {
"column": [
{
"-articleColumn": "articleCode",
"label": "Article Code ",
"-fCode": "f9",
"-value": "column1"
},
{
"-articleColumn": "Article.trend",
"label": "Trend ",
"-fCode": "f25",
"-value": "column2"
},
{
"-averageDemand": "Article.averageDemand",
"label": "Average Demand ",
"-fCode": "f564",
"-value": "column3"
},
{
"-warehouse": "Article.warehouse",
"label": "Warehouse ",
"-fCode": "f295",
"-value": "column4"
}
]
},
"rows": {
"row": [
{
"column1": "151110103",
"column2": "100",
"column3": "500",
"column4": "TOT"
},
{
"column1": "151110109",
"column2": "101",
"column3": "46",
"column4": "TOT"
},
{
"column1": "151110111",
"column2": "102",
"column3": "16",
"column4": "SEL"
},
{
"column1": "151110117",
"column2": "103",
"column3": "112",
"column4": "SEL"
}
]
}
}
}
So let me explain, for thead , i am just repeating columns and placing labels, while in rows , i am first repeating ROWS , and then inside repeating columns , by returning val and key.
jsFiddle:
http://jsfiddle.net/noitse/Lvc0u55v/9487/
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