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

How to rotate bootstrap-table (landscape view)?

I want to show my bootstrap-table by putting the columns headers on the left side and the row headers on the top.
I'm getting the data from JSON.
Any help? Thanks
Here is an idea of my code (JSON is hard coded just for testing the rotation of the table) :
<table id="table">
<thead class="thead-dark" >
<tr>
<th data-align="center" data-sortable="true" data-field="column1">COLUMN 1</th>
<th data-align="center" data-sortable="true" data-field="column2">COLUMN 2</th>
<th data-align="center" data-sortable="true" data-field="column3">COLUMN 3</th>
</tr>
</thead>
</table>
<script>
var $table = $('#table')
$(function() {
var data = [
{
'column1': 'value1',
'column2': 'value11',
'column3': 'value12'
},
{
'column1': 'value2',
'column2': 'value21',
'column3': 'value22'
},
{
'column1': 'value3',
'column2': 'value31',
'column3': 'value32'
},
{
'column1': 'value4',
'column2': 'value41',
'column3': 'value42'
},
{
'column1': 'value5',
'column2': 'value51',
'column3': 'value52'
},
{
'column1': 'value6',
'column2': 'value61',
'column3': 'value62'
}
]
$table.bootstrapTable({data: data})
})
</script>

I think CSS grid would be very good and clean solution.
For example:
grid-template-areas:
"a b c"
"d e f"
"g h i";
#include media-breakpoint-down(md) {
grid-template-areas:
"c b a"
"f e d"
"i h g";
}
#media (orientation: landscape) {
grid-template-areas:
"i h g"
"f e d"
"c b a";
}

This helped me, maybe it's useful for you as well.
<style>
.bold {
font-weight: bold;
}
</style>
<table id="table"></table>
<script>
var $table = $('#table')
$(function() {
var originData = [
{
'id': 0,
'name': 'Item 0',
'price': '$0',
'title1': '1',
'title2': '2',
'title3': '3',
'title4': '4',
'title5': '5'
}
]
var data = []
for (var key in originData[0]) {
data.push({
key: key,
value: originData[0][key]
})
}
$table.bootstrapTable({
data: data,
columns: [{
field: 'key',
title: 'Key',
class: 'bold'
}, {
field: 'value',
title: 'Value'
}],
showHeader: false
})
})
</script>

How to compare data of two jsons and display icons according to result in vue?

I have two arrays filled with JSON data: generalQuestInfo and finishedQuestleafs; object from generalQuestInfo looks like:
{
id: 1,
name: "Breaking News",
alias: "BN",
globalId: 1,
platform: "Win64",
pathway: {
status: "Robot",
name: "start case",
leafs: ["start", "teleport", "take photo", "kill", "finish"]
}
}
finishedQuestleafs looks like:
[
{
name: "start",
questId: 1
},
{
name: "teleport",
questId: 1
},
{
name: "take photo",
questId: 1
},
{
name: "kill",
questId: 1
},
{
name: "finish",
questId: 1
},
{
name: "start",
questId: 2
}
]
Where id from generalQuestInfo equals questId from finishedQuestleafs.
In Vue app I display table with data from generalQuestInfo.
But I need to compare values from generalQuestInfo pathway.leafs with finishedQuestleafs name according to ID. If pahway.leafs is in finishedQuestleafs with same ID, then I need to display fas fa-check icon, in other way - fas fa-crash.
How can I compare data in generalQuestInfo with finishedQuestleafs and display right icons? I tried to use two v-for directives, but it didn't work:(
<table align="center">
<tr>
<th>Status</th>
<th>Path name</th>
<th>Leafs Info</th>
</tr>
<tr v-bind:key="data.id" v-for="data in generalQuestInfo" v-if="data.alias == 'BN' && isActive == 1">
<td>{{ data.pathway.status }}</td>
<td>{{ data.pathway.name }}</td>
<td>{{ data.pathway.leafs }}</td> //instead of 5 data values here must be 5 icons according to finishedQuestleafs
</tr>
<tr v-bind:key="data.id" v-for="data in generalQuestInfo" v-if="data.alias == 'SAM' && isActive == 2">
<td>{{ data.pathway.status }}</td>
<td>{{ data.pathway.name }}</td>
<td>{{ data.pathway.leafs }}</td> //instead of 5 data values here must be 5 icons according to finishedQuestleafs
</tr>
<tr v-else-if="isActive == 3">
<td>NO INFO</td>
</tr>
</table>
data() {
return {
mainPageInfo: [],
generalQuestInfo: [],
finishedQuestleafs: [],
isActive: 0
}
},

First off create a method that will return appropriate icon. I believe the code of getIconClass method is self-explanatory. Then loop through leafs field in template and display name of the leaf and appropriate icon.
new Vue({
el: "#app",
data() {
return {
generalQuestInfo: [{
"id": 1,
"name": "Breaking News",
"alias": "BN",
"globalId": 1,
"platform": "Win64",
"pathway": {
"status": "Robot",
"name": "start case",
"leafs": ["start", "teleport", "take photo", "kill", "finish"]
}
}],
finishedQuestleafs: [
{ name: "start", questId: 2 },
{ name: "teleport", questId: 1 },
{ name: "take photo", questId: 1 },
{ name: "kill", questId: 1 },
{ name: "finish", questId: 1 },
{ name: "start", questId: 2 }
]
}
},
methods: {
getIconClass(id, leaf) {
return this.finishedQuestleafs.find(item => item.questId === id && item.name === leaf) ? "fa fa-check" : "fa fa-bomb";
}
}
})
.as-console-wrapper { max-height: 100% !important; top: 0; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table align="center">
<tr>
<th>Status</th>
<th>Path name</th>
<th>Leafs Info</th>
</tr>
<tr v-for="data in generalQuestInfo" :key="data.id">
<td>{{data.pathway.status}}</td>
<td>{{data.pathway.name}}</td>
<td>
<ul>
<li v-for="(leaf, index) in data.pathway.leafs" :key="index">
<i :class="getIconClass(data.id, leaf)"></i> {{ leaf }}
</li>
</ul>
</td>
</tr>
</table>
</div>

You could try making a method to check while you're in the v-for loop.
<tr v-for="data in generalQuestInfo">
<span v-if="hasQuestFinished(data.id, data.pathway.leafs)">
<!-- display stuff if hasQuestFinished() returned true -->
</span>
</tr>
And in your vue object (assuming you only want to check if its in the array:
methods:{
hasQuestFinished(questID, givenQuests){
finishedQuestleafs.forEach(function(leaf){
if(leaf.questId == questID && givenQuests.indexOF(leaf.name) >= 0){
return true;
}
});
//finished the loop without returning means no match
return false;
}
}

How to find a radio button value inside ng-repeat table?

Please help me to find all selected radio button id for below code.
Here's an idea of what my HTML looks like
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<div>
<table cellpadding="2" cellspacing="2" border="1" ng-repeat="dep in DepList track by $index">
<tr>
<th> Name </th>
</tr>
<tr ng-repeat="item in ContactsList | findobj: dep.groupid">
<td>{{item.name}}</td>
<td><input type="radio" name="radius+{{$parent.$index}}" data-ng-value="{{item.id}}" ng-model="UniqueId" selected="true" /></td>
</tr>
</table>
</div>
<div>
<button ng-click="Select()">Select</button>
</div>
</div>
</div>
And here's my Controller
var myapp1 = angular.module('MyApp', []);
myapp1.controller('MyCtrl', function ($scope) {
$scope.DepList = [
{ dep: "computer", groupid: "1" },
{ dep: "english", groupid: "2" }
];
$scope.ContactsList = [
{
name: "Sijith",
id: "1",
groupid: "1"
},
{
name: "Deepak",
id: "1",
groupid: "2"
},
{
name: "Libi das",
id: "1",
groupid: "2"
},
{
name: "Noufal",
id: "1",
groupid: "1"
},
{
name: "Jijo",
id: "1",
groupid: "2"
}];
$scope.Select = function () {
alert($scope.UniqueId);
};
});
myapp1.filter('findobj', function () {
return function (ContactsList, id) {
return ContactsList.filter(function (l) {
if (l.groupid == id) {
return true;
}
});
};
});

There are few issue with the $scope.ContactsList binding with the radio button, you are binding the id of each element as the value of radio button , which should not be same if different radio button inside a group have different values.
I have done few changes in it to give each radio button a different value. I have also created a selectedContact list in which i will populated the selected radio buttons value with the group id the belong to.
var myapp1 = angular.module('MyApp', []);
myapp1.controller('MyCtrl', function($scope) {
$scope.DepList = [{
dep: "computer",
groupid: "1"
}, {
dep: "english",
groupid: "2"
}];
$scope.ContactsList = [{
name: "Sijith",
id: "1",
groupid: "1"
}, {
name: "Deepak",
id: "1",
groupid: "2"
}, {
name: "Libi das",
id: "2",
groupid: "2"
}, {
name: "Noufal",
id: "2",
groupid: "1"
}, {
name: "Jijo",
id: "3",
groupid: "2"
}];
$scope.selectedContact = [];
$scope.Select = function() {
alert("group id 1 selected contact id:"+ $scope.selectedContact.groupid1);
alert("group id 1 selected contact id:"+ $scope.selectedContact.groupid2);
};
});
myapp1.filter('findobj', function() {
return function(ContactsList, id) {
return ContactsList.filter(function(l) {
if (l.groupid == id) {
return true;
}
});
};
});
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<div>
<table cellpadding="2" cellspacing="2" border="1" ng-repeat="dep in DepList track by $index">
<tr>
<th> Name </th>
</tr>
<tr ng-repeat="item in ContactsList | findobj: dep.groupid">
<td>{{item.name}}</td>
<td><input type="radio" name="radius+{{$parent.$index}}" data-ng-value="{{item.id}}" ng-model="selectedContact['groupid'+dep.groupid]" selected="true" /></td>
</tr>
</table>
</div>
<div>
<button ng-click="Select()">Select</button>
</div>
</div>
</div>

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