How to display dynamic json data in html using angular 6?
TS
export class CatComponent extends OnInit{
public data: any;
constructor(
private $modal: $ModalManagerService,
private http: HttpClient
) {
super();
}
ngOnInit(): void {
this.http.get('http://127.0.0.1:3000/query/aa',{responseType:"json"}).subscribe(
response => {
this.data = response;
console.log("data :"+response);
var sample=JSON.stringify(response);
});
}
}
HTML
<table>
<thead>
<tr>
<td>Key</td>
<td>ID</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr *ngFor ="let d of data;">
<td>{{d.Key}}</td>
<td>{{d.Record.id}}</td>
<td>{{d.Record.name}}</td>
</tr>
</tbody>
</table>
JSON to Dynamic HTML Table in Angular
Suppose your json is stored in data
,
Try like this:
<table>
<tr>
<th *ngFor="let item of data.columnNames">{{item}}</th>
</tr>
<tr *ngFor="let rowData of data.rows">
<td *ngFor="let el of rowData">{{el}}</td>
</tr>
</table>
Loading dynamic form from JSON using angular 6
You are not pushing TextboxQustion object in questions array. I have created sample example on stackblitz, please check.
Here is the ts code.
let newArray = this.dynamicJSON;
let questions: any = [ ]
newArray.forEach(element => {
questions.push(element)
});
questions.sort((a, b) => a.order - b.order);
fill json data in html dynamically
Although, like @Johannes Jander saying, Stackoverflow is not a "write my code for me" service I will show you how to do this.
If you don't mind that the order of the columns will be different, you can easily iterate throw the object's properties and you wouldn't need to manipulate the json
object. If the order is important, let me know and I will help you to figure it out.
To read more about what we have here please follow those links:
ng-repeat
docs.How can I iterate over the keys, value in ng-repeat in angular
Now, to the code:
angular.module('app', []).controller('ctrl', function($scope) { $scope.json = { "result": { "services": [ { "id": 1, "name": "My UI for some project that I'm doing that won't fit", "application": "app", "message": "application", "status": 1 }, { "id": 2, "name": "My DB for some project that I'm doing", "application": "app1", "message": "application1", "status": 3 }, { "id": 3, "name": "Another service", "application": "app2", "message": "application2", "status": 3 } ], } } });
table { border-collapse: collapse;}
td { border: 1px solid;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="ctrl"> <table data-ng-if="json.result.services.length > 0"> <thead> <tr> <th data-ng-repeat="(key, value) in json.result.services[0]" data-ng-bind="key"></th> </tr> </thead> <tbody> <tr data-ng-repeat="service in json.result.services"> <td data-ng-repeat="(key, value) in service" data-ng-bind="value"></td> </tr> </tbody> </table></div>
Angular 8 dynamic table with JSON data
Why do you want to iterate over an object? Your data should be an array! Then you can calculate your headers easily:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-message-results',
templateUrl: './message-results.component.html',
styleUrls: ['./message-results.component.scss']
})
export class MessageResultsComponent {
@Input() dataMessageResults: any[];
constructor() { }
getHeaders() {
let headers: string[] = [];
if(this.dataMessageResults) {
this.dataMessageResults.forEach((value) => {
Object.keys(value).forEach((key) => {
if(!headers.find((header) => header == key)){
headers.push(key)
}
})
})
}
return headers;
}
}
<div class="play-container">
<h1>Child</h1>
<table border>
<thead>
<tr>
<th *ngFor="let header of getHeaders()">{{header}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataMessageResults">
<td *ngFor="let key of getHeaders()">{{item[key]}}</td>
</tr>
</tbody>
</table>
Ionic angular dynamic grid display of a json
html code
<ion-row *ngFor="let item of retrievedData" >
<ion-col size="6">{{item?.date}}</ion-col>
<ion-col size="6">{{item?.time}}</ion-col>
</ion-row>
ts code
public retrievedData = [
{ date: "2021-05-17", time: "+4:56" },
{ date: "2021-05-18", time: "+5:34" }
]
how to create complex table from json using angular 6?
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 generate the dynamic angular form with the JSON data conditionally
Try like this:
<ng-container *ngFor="let item of form_template">
<ng-container [ngSwitch]="item.type">
<div *ngSwitchCase="'select'">
{{item.label}}
<select>
<option *ngFor="let option of item.options" [value]="option.sped1">
{{option.label}}
</option>
</select>
</div>
</ng-container>
</ng-container>
Demo
To accomodate Subfield I made few changes:
Working Demo with Subfield
Template:
<ng-container *ngFor="let item of form_template">
<ng-container [ngSwitch]="item.type">
<div *ngSwitchCase="'select'">
{{item.label}}
<select (ngModelChange)="onChange($event,item.isChild)" [(ngModel)]="values[item.label + i]">
<option *ngFor="let option of item.options" [value]="option.value">
{{option.label}}
</option>
</select>
</div>
</ng-container>
</ng-container>
Typescript:
onChange(evt, isChild?) {
this.form_template.forEach(item => {
let options = item.options.filter(x => x.value == evt)[0]
var allLabels: string[] = this.form_template.map(x => x.label)
if (options) {
if (options.subfield && !allLabels.includes(options.subfield.label)) {
Object.assign(options.subfield, {isChild:true});
this.form_template.push(options.subfield)
}
} else {
this.form_template.forEach((x, i) => {
x.options.forEach(y => {
if (y.value != evt) {
this.form_template.forEach((item, itemIndex) => {
if (item.options.indexOf(y)) {
if (!isChild) {
this.form_template.splice(itemIndex, 1)
}
}
})
}
})
})
}
})
}
Related Topics
How to Disable a Text Area or Mat-Form-Field
How to Put CSS @Media Rules Inline
Bootstrap Row With Columns of Different Height
How to Horizontally Center an Element
Hide Scroll Bar, But While Still Being Able to Scroll
Why Is There an Unexplainable Gap Between These Inline-Block Div Elements
How to Match Width of Text to Width of Dynamically Sized Image/Title
Stylesheet Not Loaded Because of Mime-Type
Why Position:Sticky Is Not Working When the Element Is Wrapped Inside Another One
Favicon Not Showing Up in Google Chrome Browser
Loading Images from External Folder to Component Angular 2
How to Remove Unwanted Space in This Table
Why Is There a White Space Between Parent Div and Inner Div in React
Why Don't Flex Items Shrink Past Content Size
How to Style a Checkbox Using Css