Click here to Skip to main content
15,867,330 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have an Angular cli project where I want to read data from a JSON file. These data should be displayed on form's fields when the form is opened by user.

What I have tried:

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?
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900