How to read JSON file in Angular cli? - json

Question

I have an Angular cli project where I want to read data from a JSON file. These datas should be displayed on form's fields when the form is opened by user. What I have tried so far:
EmailSettingsComponent.ts
import { Component, OnInit, ViewChild, ViewEncapsulation, ChangeDetectorRef, Inject } from '#angular/core';
import * as FileSaver from 'file-saver';
import { MatDialog, MAT_DIALOG_DATA } from '#angular/material';
#Component({
selector: 'app-email-settings',
templateUrl: './email-settings.component.html',
styleUrls: ['./email-settings.component.css']
})
export class EmailSettingsComponent implements OnInit {
constructor() { }
smtpSettings: any;
saveJSON() {
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
// a.style = "display: none";
return function (data, fileName) {
//saving JSON code
};
}());
let smtpHost = (document.getElementById("smtpHost") as HTMLInputElement).value;
let smtpPort = (document.getElementById("smtpPort") as HTMLInputElement).value;
let smtpUserName = (document.getElementById("smtpUserName") as HTMLInputElement).value;
let smtpPassword = (document.getElementById("smtpPassword") as HTMLInputElement).value;
let smtpFrommtpHost = (document.getElementById("smtpFrom") as HTMLInputElement).value;
let smtpDisplayName = (document.getElementById("smtpDisplayName") as HTMLInputElement).value;
let smtpRecipients = (document.getElementById("smtpRecipients") as HTMLInputElement).value;
var data = { "Host": smtpHost, "Port": smtpPort, "UserName": smtpUserName, "UserPassword": smtpPassword, "From": smtpFrommtpHost, "DisplayName": smtpDisplayName, "Recipients":smtpRecipients, d: new Date() },
fileName = "my-download.json";
saveData(data, fileName);
}
ngOnInit(): void {
fetch('./assets/my-download.json').then(res => res.json())
.then(json => {
this.smtpSettings = json;
});
}
}
EmailSettingsComponent.html
<h1 mat-dialog-title>Email Settings</h1>
<div mat-dialog-content style="width: auto; height: auto">
<form id="formID" class="example-form" *ngFor="let item of smtpSettings">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>SMTP Host</mat-label>
<textarea id="smtpHost" matInput placeholder="Ex: smtp.gmail.com">{{item.Host}}</textarea>
</mat-form-field>
<br />
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>SMTP Port</mat-label>
<textarea id="smtpPort" matInput placeholder="Ex: 587"></textarea>
</mat-form-field>
<br />
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>SMTP User Name</mat-label>
<textarea id="smtpUserName" matInput placeholder="Ex: example#gmail.com"></textarea>
</mat-form-field>
<br>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>SMTP User Password</mat-label>
<textarea id="smtpPassword" matInput placeholder="Ex: password"></textarea>
</mat-form-field>
<br>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>SMTP From</mat-label>
<textarea id="smtpFrom" matInput placeholder="Ex: example#gmail.com"></textarea>
</mat-form-field>
<br>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>SMTP Display Name</mat-label>
<textarea id="smtpDisplayName" matInput placeholder="Ex: Jhon"></textarea>
</mat-form-field>
<br>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Recipients</mat-label>
<textarea id="smtpRecipients" matInput placeholder="Ex: someone#email.com; somebody#test.com"></textarea>
</mat-form-field>
<br>
<button mat-button (click)="saveJSON()">Save</button>
</form>
</div>
With the above code, I'm getting Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays..
Based on kva's reply on accepted answer of this post, I have replaced smtpSettings: any; with smtpSettings: any=[];. Following this action, I get rid of the above error, but I get another one which is Error trying to diff '[object Object]'. Only arrays and iterables are allowed.
How could I read the data from JSON and populate the form with it when the form is opened?