How to Display Dynamic Json Data in HTML Using Angular 6

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:

  1. ng-repeat docs.
  2. 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



Leave a reply



Submit