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

Show key as value in datatable

Hi I'm currently having trouble with datatable. My datasource is object and I want every first key in the object displayed as value in datatable. Here is my code.
var my_data = {
"content": [
{
"data_v1": [{"id" : 1}]
},
{
"data_v2": [{"id" : 2}]
},
{
"data_v3": [{"id" : 3}]
}
]
};
$(document).ready(function() {
$('#example').DataTable( {
data:my_data,
columns: [
{ data: 'content'
}
]
} );
} );
What output I expect is this.
| Content |
-------------
data_v1
data_v2
data_v3
Note: As long as posible, I don't want to use forloop or any kind of loop. TIA
Any help will be so much appreciated.

Try
var myData = {
"content": [
{
"data_v1": [{"id" : 1}]
},
{
"data_v2": [{"id" : 2}]
},
{
"data_v3": [{"id" : 3}]
}
]
};
$(document).ready(function()
{
$('#example').DataTable( {
data: Object.keys(myData["content"]),
columns: [
{ title: 'content'
}
]
});
});
Object.keys will return an array of keys from the data provided

This answer is from #colin of Datatable.
$(document).ready(function() {
var my_data = {
"contents": [{
"data_v1": [{
"id": 1
}]
},
{
"data_v2": [{
"id": 2
}]
},
{
"data_v3": [{
"id": 3
}]
}
]
};
var table = $('#example').DataTable({
data: my_data.contents,
columnDefs: [{
targets: 0,
render: function(data, type, row, meta) {
return (Object.keys(row)[0]);
}
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="example"></table>

how to parse array of objects inside an object using maps or forEach

my JSON data looks like this: {
"objects": [
{
"name": "case1",
"description": "description of case1",
"shapes": [
{
"shape_name": "circle"
}
],
"order_ref": [
{
"id": "2233"
}
]
},
{
"name": "case2",
"description": "description of case2",
"shapes": [
{
"shape_name": "heart"
},
{
"shape_name": "square"
}
],
"order_ref": [
{
"id": "1212"
}
]
}
]
}
I need to create a table from the data.
The table should look like this:
Id Shape Name Description
2233 Circle Case1 Desc of case1
1212 Heart Case2 Desc of case2
1212 Square Case2 Desc of case2
I tried to parse JSON data using maps: I am able to get name and description but cannot go inside shapes and order_ref. Can you suggest me a solution using maps or forEach

You can do forEach within a forEach, ex:
let array = [
{
name: "case1",
description: "description of case1",
shapes: [
{
shape_name: "circle"
}
],
order_ref: [
{
id: "2233"
}
]
},
{
name: "case2",
description: "description of case2",
shapes: [
{
shape_name: "heart"
},
{
shape_name: "square"
}
],
order_ref: [
{
id: "1212"
}
]
}
];
let newArray = [];
array.forEach(obj => {
obj.shapes.forEach(shape => {
let newObj = Object.assign({}, obj);
newObj.shape_name = shape.shape_name;
delete newObj.shapes;
newObj.id = obj.order_ref[0].id;
delete newObj.order_ref;
newArray.push(newObj);
});
});
console.log(newArray);
After you are getting the newArray, you can iterate it with and as per normal

You need two forEach() to achieve the table.
You can try the following way
var data = {
"objects": [
{
"name": "case1",
"description": "description of case1",
"shapes": [
{
"shape_name": "circle"
}
],
"order_ref": [
{
"id": "2233"
}
]
},
{
"name": "case2",
"description": "description of case2",
"shapes": [
{
"shape_name": "heart"
},
{
"shape_name": "square"
}
],
"order_ref": [
{
"id": "1212"
}
]
}
]
}
var tr = '';
data.objects.forEach(o => {
o.shapes.forEach(io => {
tr += `<tr><td>${o.order_ref[0].id}</td><td>${io.shape_name}</td><td>${o.name}</td><td>${o.description}</td></tr>`;
});
});
document.querySelector('#tableData tbody').insertAdjacentHTML('beforeend', tr);
table, th, td {
border: 1px solid black;
}
td:first-letter{
text-transform: capitalize
}
<table id="tableData">
<thead>
<th>Id</th>
<th>Shape</th>
<th>Name</th>
<th>Description</th>
</thead>
<tbody></tbody>
</table>

If you need an entry for every order ref id and shape, you can use forEach as per below:
let jsonArray = {
"objects": [
{
"name": "case1",
"description": "description of case1",
"shapes": [
{
"shape_name": "circle"
}
],
"order_ref": [
{
"id": "2233"
}
]
},
{
"name": "case2",
"description": "description of case2",
"shapes": [
{
"shape_name": "heart"
},
{
"shape_name": "square"
}
],
"order_ref": [
{
"id": "1212"
}
]
}
]
}
let output = [];
jsonArray.objects.forEach(object => {
object.order_ref.forEach(order => {
object.shapes.forEach(shape => {
output.push({
id: order.id,
shape: shape.shape_name,
name: object.name,
description: object.description
})
})
})
})

mongo update script: change fields in embedded documents

I am writing a script to update(add and rename) certain fields, which are part of an embedded document within the ones stored in the db collection.
to give an example document:
{
_id: UUID("025bda29-0d09-4923-8f7f-ea2e825be2c8"),
name: "test",
sets: [
{
"name": "1",
"values": [
{
name: "a",
value: 5
}
]
},
{
"name": "2",
"values": [
{
name: "a",
value: 3
}
]
}
]
}
This is my script:
function convertGroup (group) {
for (var i = 0; i < group.sets.length; i++) {
var set = group.sets[i];
var oldValuesField = "sets." + i.toString() + ".values";
var mainValuesField = "sets." + i.toString() + "mainValues";
var additionalValuesField = "sets." + i.toString() + ".additionalValues";
db.getCollection('group').updateOne({
"_id" : group._id
}, {
$set: {
mainValuesField : set.values,
additionalValuesField : [ ]
},
$unset: {
oldValuesField: ""
}
});
}
}
db.getCollection('group').find({'sets.0.mainValues': {$exists: false}}).forEach(convertGroup);
According to the documentation the $rename does not work on arrays, that is why I used set and unset.
what happens when I run this code, is that I get the mainValues field and additionalValues field in the group document, and not in the set documents.
this is what I want it to become:
{
_id: UUID("025bda29-0d09-4923-8f7f-ea2e825be2c8"),
name: "test",
sets: [
{
"name": "1",
"mainValues": [
{
name: "a",
value: 5
}
],
"additionalValues": [ ]
},
{
"name": "2",
"mainValues": [
{
name: "a",
value: 3
}
],
"additionalValues": [ ]
}
]
}
Can anyone explain to me why this happens and how I can make this work the way I want it to?

I managed to fix it by rewriting the script like this:
function convertGroup(group) {
group.sets.forEach(function (set) {
if (!set.mainValues) {
$set : {
set.mainValues = set.values
}
}
if (!set.additionalValues) {
$set : {
set.additionalValues = []
}
}
});
db.getCollection('group').update({'_id': group._id}, group);
}
db.getCollection('group').find({'sets.mainValues': {$exists: false}}).forEach(convertGroup)
the different is mostly not using the notation 'sets.[index].values' but editing it directly on the json and using 'update' instead of 'updateOne'

How to access different properties in array of objects - each object has different keys

I tried the below 2 options but both are not working.
JSON
{
"Properties": [
{
"Type": "LEI"
},
{
"Country": "DE"
},
{
"Name": "Credit Institution"
}
]
}
Angular Typescript
Option #1
<ng-template pTemplate="body" let-entity>
<tr>
<td>{{entity.Properties[Type]}}</td>
<td>{{entity.Properties[Country]}}</td>
<td>{{entity.Properties[Name]}}</td>
</tr>
</ng-template>
Option #2
<ng-template pTemplate="body" let-entity>
<tr>
<td>{{entity.Properties.Type}}</td>
<td>{{entity.Properties.Country}}</td>
<td>{{entity.Properties.Name}}</td>
</tr>
</ng-template>
Update:-
My real JSON
{
"_id": "5bcb2dbfe8ffdd1bd0913825",
"_entitykey": "CRD_CRE_INS.CRDINSLEICODE",
"_validfrom": "2018-10-20T13:31:35.040Z",
"_validto": "2100-12-31T00:00:00.000Z",
"_datahash": "84f28a3fed7d3a1e5e2b21e5bc91e8a1",
"_payload": {
"CA_OwnerID": "EU_ECB",
"EntityCode": "CRDINSLEICODE",
"EntityType": "CRD_CRE_INS",
"Properties": [{
"EEA_DEP_GUA_SCH": [
"IS_TIF",
"GB_FSCS"
]
},
{
"ENT_AU": [
"2017-09-05",
"2018-10-05",
"2019-01-01"
]
},
{
"ENT_COD_TYP": "LEI"
},
{
"ENT_COU_RES": "DE"
},
{
"ENT_NAM": "Credit Institution In Germany"
},
{
"ENT_NAT_REF_COD": "REFCODE12342"
},
{
"ENT_TOW_CIT_RES": "GERMAN TOWN1243"
},
{
"INT_CAP_REQ_UND_ART_12": "ART_12_1_CRD"
},
{
"TYP_UND_ACC_CRR_ART_27": "ART_27_1_A1_CRR"
},
{
"IS_HID_NOT_PUB": "0"
}
],
"Services": [{
"DE": [
"PS_010",
"PS_020",
"PS_03A",
"PS_03B"
]
},
{
"GR": [
"PS_010",
"PS_020"
]
}
]
}
}

I have created a sample application to bind property dynamically on stackblitz
Here is the component code.
data = {
"Properties": [
{
"Type": "LEI"
},
{
"Country": "DE"
},
{
"Name": "Credit Institution"
}
]
}
columns:string[] = [];
ngOnInit(){
for(let row of this.data.Properties){
for(var columnName in row){
this.columns.push(columnName)
}
}
}
Here is the Html Code.
<table>
<tr *ngFor="let row of data.Properties; let i = index">
<td >{{row[columns[i]]}}</td>
</tr>
</table>
First you need to create a columns array and bind that in the html.
Please let me know if you have any question.

I think your best bet is to map the properties into a single structure and then you can access the properties as you want to.
The resulting structure would look like the following:
{
"Type": "LEI",
"Country": "DE",
"Name": "Credit Institution"
}
So you will be accessing a single object instead of an array of objects with different properties, like so:
var entity = {
"Properties": ([
{
"Type": "LEI"
},
{
"Country": "DE"
},
{
"Name": "Credit Institution"
}
]).reduce((res, curr) => Object.assign(res, curr), {})
}
console.log(entity.Properties)
<ng-template pTemplate="body" let-entity>
<tr>
<td>{{entity.Properties.Type}}</td>
<td>{{entity.Properties.Country}}</td>
<td>{{entity.Properties.Name}}</td>
</tr>
</ng-template>
Or, if you want to show all properties, you can do so dynamically, like so:
<ng-template pTemplate="body" let-entity>
<tr>
<td *ngFor="let key of entity.Properties">{{entity.Properties[key]}}</td>
</tr>
</ng-template>