Import a JSON file into Angular 8 and parse its contents

Question

Import a JSON file into Angular 8 and parse its contents

My code is intended to read and upload a JSON file (ARM template), but I am encountering an issue where this.updateObj appears as undefined in the console.log. Below is my code:

onChange(fileList: FileList): void {
    var file = fileList[0];
    var fileReader = new FileReader();
    var newFile = {};
    fileReader.readAsText(file, 'UTF-8');
    fileReader.onload = () => {
      newFile = fileReader.result as object;
      this.updateObj = cloneDeep(newFile);
    };
    console.log('updateObj', this.updateObj);
}

Any insight or suggestions on how to resolve this problem are greatly appreciated.

javascript typescript angular8

Answer 1

Answer №1

Your query is a bit unclear, but I believe this response should provide some clarity.

In the future, it would be beneficial to create a Minimal Reproducible Example (MRE) to assist others in assisting you more effectively.

.ts

  updateObj: any;
  onChange(event: any): void {
    var file = event.target.files[0];
    var fileReader = new FileReader();
    fileReader.readAsText(file, "UTF-8");
    fileReader.onload = () => {
      const newFile = fileReader.result as string;
      this.updateObj = JSON.parse(newFile);
    };
  }

.html

<input type="file" (change)="onChange($event)" />

<pre><code>{{updateObj | json}}</code></pre>

Using Stackblitz can greatly facilitate creating MREs for Angular-related queries.

Check out this Stackblitz example

UPDATE

@DnyaneshSurya Thank you for providing the MRE. Although your example works, it's still not entirely clear what your goal is. Note that `ngOnInit` is only called once during component initialization, thus causing the initial value of your `Input` to be undefined. If you need to perform actions when the value updates, consider using a getter/setter on the `armTemplate` property.

Here's another Stackblitz example for demonstration purposes.

Answer 2

Your query is a bit unclear, but I believe this response should provide some clarity.

In the future, it would be beneficial to create a Minimal Reproducible Example (MRE) to assist others in assisting you more effectively.

.ts

  updateObj: any;
  onChange(event: any): void {
    var file = event.target.files[0];
    var fileReader = new FileReader();
    fileReader.readAsText(file, "UTF-8");
    fileReader.onload = () => {
      const newFile = fileReader.result as string;
      this.updateObj = JSON.parse(newFile);
    };
  }

.html

<input type="file" (change)="onChange($event)" />

<pre><code>{{updateObj | json}}</code></pre>

Using Stackblitz can greatly facilitate creating MREs for Angular-related queries.

Check out this Stackblitz example

UPDATE

@DnyaneshSurya Thank you for providing the MRE. Although your example works, it's still not entirely clear what your goal is. Note that `ngOnInit` is only called once during component initialization, thus causing the initial value of your `Input` to be undefined. If you need to perform actions when the value updates, consider using a getter/setter on the `armTemplate` property.

Here's another Stackblitz example for demonstration purposes.

Import a JSON file into Angular 8 and parse its contents

Answer №1

Similar questions

What steps can be taken to disable auto correction in ngx date picker?

How to display a conditional component in a single line with Material UI

Sharing multiple object data using socket.io in express

Unveiling the types of an object's keys in Typescript

Error code 1 occurs when attempting to execute the "npm run start" command

Steps for correctly displaying a success message after clicking and copying to the clipboard:

Is there a source where I can locate type definitions for Promise objects?

Switching button presses

Assembly of Components

Utilizing AWS SDK (S3.putObject) to transfer a Readable stream to Amazon S3 using node.js

Transmitting Data via Socket.io: Post it or Fetch it!

Are there any alternatives to Google Charts for creating charts?

Animating the Click Event to Change Grid Layout in React

Executing a designated assessment in Protractor

Event for terminating a Cordova application

There seems to be an issue with AJAX file uploading functionality in Django

Is it possible to dynamically load records in real time with the help of PHP and jQuery?

Can Ajax and jQuery be utilized on a webpage in conjunction with a cron job?

What are the steps to create a connect4 board featuring rounded corners and curved sides?

Enhance the information within the textextjs plugin by incorporating additional data