Develop Reference

how to create complex table from json using angular 6?

I am trying to create table from the given json. here is json Structure. i am using simple html table to make table structure same like mentioned in below snapshot.as data's are dynamic table structure is not displaying proper in my case.
{
"e_id": "1234",
"e_o_name": "Contact_info",
"matching_details": [
{
"me_value": "value1",
"matching_attributes": [
{
"me_id": "1234",
"me_name": "28 sai",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "a#gmail"
},
{
"me_value": "b#gmail"
}
],
"me_percent": "100"
}
]
},
{
"me_id": "5678",
"me_name": "29 meena",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "c#gmail.com"
},
{
"me_value": ",d#gmail.com"
}
],
"me_percent": "100"
}
]
}
]
},
{
"me_value": "value2",
"matching_attributes": [
{
"me_id": "1234",
"me_name": "rimzim",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "p#gmail"
},
{
"me_value": "q#gmail"
}
],
"me_percent": "100"
}
]
},
{
"me_id": "5678",
"me_name": "ranu",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "t#gmail.com"
},
{
"me_value": ",u#gmail.com"
}
],
"me_percent": "100"
}
]
}
]
},
]}
above structure is the actual output.I tried creating the same but for
me data's are coming in single row.
enter code here<table>
<tbody>
<tr>
<th>contact</th>
<th>ty</th>
<th>ed</th>
<th>mail</th>
<th>percent</th>
</tr>
<tr>
<td rowspan="4">data.e_o_name</td>
<td rowspan="2" *ngFor="let match of data.matching_details">{{match.me_value}}</td>
<td>28 sai</td>
<th>a#gmail,b#gmail</th>
<td>100</td>
</tr>
</tbody>
Help for the same is highly appriciated... Thanks in advance

I would prepare proper table rows structure in order to render this complex table.
component.ts(or service.ts)
rows = [];
generateTable() {
if (!this.data) {
return;
}
this.rows.push([
{
text: this.data.e_o_name,
rowspan: 0
}
]);
let maxRowSpan = 0;
this.data.matching_details.forEach((detail, i) => {
const elemRowSpan = Math.max(detail.matching_attributes.length, 1);
maxRowSpan += elemRowSpan;
if (i > 0) {
this.rows.push([])
}
this.rows[this.rows.length - 1].push({
text: detail.me_value,
rowspan: elemRowSpan
});
detail.matching_attributes.forEach((attr, j) => {
if (j > 0) {
this.rows.push([])
}
const mail = attr.me_list[0];
this.rows[this.rows.length - 1].push(
{
text: attr.me_name,
rowspan: 1
},
{
text: mail.me_email_list.map(({ me_value }) => me_value).join(', '),
rowspan: 1
},
{
text: mail.me_percent,
rowspan: 1
}
);
})
});
this.rows[0][0].rowspan = maxRowSpan;
}
template.html
<table>
<tbody>
<tr>
<th>contact</th>
<th>ty</th>
<th>ed</th>
<th>mail</th>
<th>percent</th>
</tr>
<tr *ngFor="let row of rows">
<td *ngFor="let col of row" [attr.rowSpan]="col.rowspan">{{ col.text }}</td>
</tr>
</tbody>
</table>
Ng-run Example

Javascript Datatables generating HTML link using render function on JSON data

I got a html table:
<table id="dattable" class="table table-striped table-bordered hover" cellspacing="0" >
<thead>
<tr>
<th>Name</th>
<th>Industry</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
and it is populated by JSON data. I want to use the render function to make items in the name column have a HTML link using the id field but it is not working.
var data2 =[
{
"id": "0",
"name": "Jack Spicer",
"industry__name": "System Architect",
"cost": "$3,120",
},
{
"id":"1",
"name": "Sean Spice",
"industry__name": "Motormouth",
"cost": "-$5,300",
}
];
$(document).ready(function() {
var table = $('#dattable').DataTable( {
data: data,
columns: [
{ data: 'name', "render": ""+[, ].name+""}, //render function
{ data: 'industry__name' },
{ data: 'cost' }
],
} );
} );

Based on your code, I think you need to change the definition of the column that generates the custom text you want. Also, I modified the call to render to use the function version.
var data2 = [{
"id": "0",
"name": "Jack Spicer",
"industry__name": "System Architect",
"cost": "$3,120",
}, {
"id": "1",
"name": "Sean Spice",
"industry__name": "Motormouth",
"cost": "-$5,300",
}];
$(document).ready(function() {
var table = $('#dattable').DataTable({
data: data2,
columns: [{
'data': null,
'render': function(data, type, row, meta) {
return '<a href=' + data.id + '>' + data.name + '</a>';
}
}, {
data: 'industry__name'
}, {
data: 'cost'
}]
});
});
You can take a lot at this as well, to see the changes I applied: https://jsfiddle.net/dr3hcd9j/

Add Hardcoded row to AngularJS tableoptions

I'm new to angular and I have a page that will be using dtable. The table will be built in my controller but for the time being I want to add some hardcode rows until I am ready to populate my table with valid details but I have no idea how to do this.
HTML
<dtable class="full-height material"
style="height: 555px"
options="vm.tableoptions"
rows="vm.adviseraccess">
</dtable>
Controller
var vm = this;
vm.tableoptions =
{
rowHeight: 50,
headerHeight: 30,
footerHeight: 50,
columnMode: 'force',
columns:
[
{
name: "Adviser Name",
width: 75
},
{
name: "Allow Access",
width: 25
}
],
};
I tried seeing if adding items to my tableoptions would work as shown below but it doesn't
vm.tableoptions =
{
rowHeight: 50,
headerHeight: 30,
footerHeight: 50,
columnMode: 'force',
columns:
[
{
name: "Adviser Name",
width: 75
},
{
name: "Allow Access",
width: 25
}
],
items:
[
{
"name": "One"
}
{
"name": "Two"
}
]
};
And I also tried the following
vm.adviseraccess = [
{
name: "Antony"
},
{
name: "Bob"
},
{
name: "Will"
}
];

Try Like This
<div ng-controller="AngularWayCtrl as showCase">
<table datatable="ng" class="row-border hover">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in showCase.persons">
<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
</tr>
</tbody>
</table>
</div>
Controller
angular.module('showcase.angularWay', ['datatables', 'ngResource'])
.controller('AngularWayCtrl', AngularWayCtrl);
function AngularWayCtrl($resource) {
var vm = this;
vm.persons=[{
"id": 860,
"firstName": "Superman",
"lastName": "Yoda"
}, {
"id": 870,
"firstName": "Foo",
"lastName": "Whateveryournameis"
}, {
"id": 590,
"firstName": "Toto",
"lastName": "Titi"
}, {
"id": 803,
"firstName": "Luke",
"lastName": "Kyle"
}];
}
for more Details please Refer this Link Angular-dataTables

Find into model by key

I want to obtain a "row" from a model querying by key. ¿How can I achieve that?
I´m looking for something like
{{ mysettings.backcolor | searchby(datuak.ref) }} or something like this.
The fact is that I have a model with data, and other model with bacground and forecolor info. The relation between them is the "ref" column.
When printing the table, on the ng-repeat, I want to to obtain the foreground/backcolor querying it by id.
Any help or clue?
I have this two models in my controller:
$scope.mysettings = [
{ ref: '3CI00001', backcolor: '#000000', forecolor: '#ffffff' },
{ ref: '3CI00002', backcolor: '#5cb85c', forecolor: '#000000' }
];
And this is the other model:
$scope.datuak = [
{
linea: '1',
egunak:[{
fetxa: '2014/05/19',
turnoak: [
{
turno: "1",
ordenes: [
{ ref: '3CI00001'},
{ of: 'OF000013'}
]
},
{
turno: "2",
ordenes: [
{ ref:'3CI00001'},
{ of:'112233'},
{ ref:'3CI00001'}
]
},
{
turno: "3",
ordenes: [
{ ref:'3CI00001'}
]
}
]},
{fetxa: '2014/05/20'},
{fetxa: '2014/05/21',
turnoak: [
{
turno: "1",
ordenes: [
{ ref: '3CI00001'},
{ of: 'OF200013'}
]
},
{
turno: "2",
ordenes: [
{ ref:'3CI00001'},
{ of:'OF232233'},
{ of:'OF289977'}
]
},
{
turno: "3",
ordenes: [
{ ref:'3CI00001'},
{ of:'OF200000'},
{ ref:'3CI00001'},
{ of:'OF200000'},
{ ref:'3CI00001'}
]
}
]},
{fetxa: '2014/05/22'},
{fetxa: '2014/05/23'},
{fetxa: '2014/05/24'},
{fetxa: '2014/05/25'}
]
},
{
linea: '2',
egunak:[
{ fetxa: '2014/05/19'},
{
fetxa: '2014/05/20',
turnoak: [
{
turno: "1",
ordenes: [
{ ref: '3CI00001'},
{ of: '2OF000013'}
]
},
{
turno: "2",
ordenes: [
{ ref:'3CI00001'},
{ of:'2OF2233'},
{ ref:'3CI00001'}
]
},
{
turno: "3",
ordenes: [
{ ref:'3CI00001'}
]
}
]},
{fetxa: '2014/05/21'},
{
fetxa: '2014/05/22',
turnoak: [
{
turno: "1",
ordenes: [
{ ref: '3CI00001'},
{ of: '2OF200013'}
]
},
{
turno: "2",
ordenes: [
{ ref:'3CI00001'},
{ of:'2OF232233'},
{ ref:'3CI00001'}
]
},
{
turno: "3",
ordenes: [
{ ref:'3CI00001'},
{ of:'2OF200000'},
{ ref:'3CI00001'},
{ of:'2OF200000'},
{ ref:'3CI00001'}
]
}
]},
{fetxa: '2014/05/23'},
{fetxa: '2014/05/24'},
{fetxa: '2014/05/25'}
]
}
];
With this two model, I have my view like this:
<tbody>
<tr ng-repeat="lineas in datuak">
<td class="tdlinea">Linea:{{ lineas.linea }}</td>
<td data-ng-repeat="nireindex in [0,1,2,3,4,5,6]">
<table class="table text-center table-condensed">
<thead>
<th>Mañana</th>
<th>Tarde</th>
<th>Noche</th>
</thead>
<tbody>
<tr>
<td>
<table>
<tr ng-repeat="orden in lineas.egunak[nireindex].turnoak[0].ordenes" ng-if="checkStatus(lineas.egunak[nireindex].fetxa,nireindex)">
<td>{{ orden.ref }} {{ orden.of }} </td>
</tr>
</table>
</td>
<td>
<table>
<tr ng-repeat="orden in lineas.egunak[nireindex].turnoak[1].ordenes" ng-if="checkStatus(lineas.egunak[nireindex].fetxa,nireindex)"><td>{{ orden.ref }} {{ orden.of }}</td></tr>
</table>
</td>
<td>
<table>
<tr ng-repeat="orden in lineas.egunak[nireindex].turnoak[2].ordenes" ng-if="checkStatus(lineas.egunak[nireindex].fetxa,nireindex)"><td>{{ orden.ref }} {{ orden.of }}</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr> <!-- lineas -->
</tbody>

You may look at angular js filter filter : https://docs.angularjs.org/api/ng/filter/filter
if you need to go further you can create your own that use array.filter() method:
app.filter('searchBy', function() {
return function( array, prop , val ) {
// filter has polyfills for older browsers. Check underscore.js if needed
return array.filter( function(row) {
return row[prop] == val;
} );
// this returns an array. You can pick the first element with [0]
}
} );
then use it in your loop like this:
{{ mySetting | searchBy : 'ref' : linea.ref }}

The easy way to achieve this is to refactor your model to behave like an associative array instead of a common. It should end up like this:
$scope.mysettings = {
3CI00001: { ref: '3CI00001', backcolor: '#000000', forecolor: '#ffffff' },
3CI00002: { ref: '3CI00002', backcolor: '#5cb85c', forecolor: '#000000' }
};
That way you could access objects by it's id simply by doing mysettings[id].backcolor
Cheers!

What you can do is loop through your settings, then loop through each settings object and return the matched item:
function findSetting(s) {
//loop through all settings-->
for (var i = 0; i < mySettings.length; i++) {
//if setting is an object loop through keys in object-->
if (typeof (mySettings[i]) === 'object') {
for (var key in mySettings[i]) {
if (mySettings[i][key] === s) {
//return match-->
return mySettings[i];
}
}
}
}
}
Here is a fiddle

Bring the last td to the next line in tr knockout

I want to bring the last column 'Description' to the next line
Here is fiddle http://jsfiddle.net/pratbhoir/fNhKp/12/
It must be look like
I need table, the description td must be in the same tr.
Item name SalesCount Price
Speedy Coyote 89 $190.00
This is a Description
Furious Lizard 152 $25.00
This is a Description
Thankyou in advance for the help

You should have something like this: (I have updated your jsfiddle)
Alternatively, you can use div's in your template instead table, but I'm not sure cause I don't know ko.simpleGrid so deeply ...
HTML
<div class='liveExample'>
<div data-bind='simpleGrid: gridViewModel, simpleGridTemplate:"custom_grid_template"'> </div>
</div>
<script type="text/javascript" id="custom_grid_template">
<table class="ko-grid" cellspacing="0">
<thead>
<tr data-bind="foreach: columns">
<th data-bind="text: headerText"></th>
</tr>
</thead>
<tbody data-bind="foreach: itemsOnCurrentPage">
<tr data-bind="foreach: $parent.columns">
<!--ko ifnot: typeof rowText == 'object' && typeof rowText.action == 'function'-->
<td data-bind="text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] "></td>
<!--/ko-->
</tr>
<!-- Your "desc" should be rendered as a row -->
<tr>
<td colspan="3" data-bind="text: desc">Test</td>
</tr>
</tbody>
</table>
</script>
JavaScript
var initialData = [
{ name: "Well-Travelled Kitten", sales: 352, price: 75.95, desc:"This is a description" },
{ name: "Speedy Coyote", sales: 89, price: 190.00 , desc:"This is a description" },
{ name: "Furious Lizard", sales: 152, price: 25.00 , desc:"This is a description" },
{ name: "Indifferent Monkey", sales: 1, price: 99.95 , desc:"This is a description" },
{ name: "Brooding Dragon", sales: 0, price: 6350 , desc:"This is a description" },
{ name: "Ingenious Tadpole", sales: 39450, price: 0.35 , desc:"This is a description" },
{ name: "Optimistic Snail", sales: 420, price: 1.50 , desc:"This is a description" }
];
var PagedGridModel = function(items) {
this.items = ko.observableArray(items);
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Item Name", rowText: "name" },
{ headerText: "Sales Count", rowText: "sales" },
{ headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
//Your "desc" is not a column
],
pageSize: 4
});
};
ko.applyBindings(new PagedGridModel(initialData));