How to write and read different JSON objects as BLOB in file using angular

Question

In my Angular program, have a class called myObj and an array called myArrayObj, that contains many instances of myObj.

I am currently storing it into Blob and write into file, as shown below.

    const blob = new Blob([JSON.stringify([myArrayObj])], { type: 'application/json' });
    saveAs(blob, `${myFileName}.json`);

To retrieve content from file, I have another set of codes.

    const fileReader = new FileReader();
    fileReader.onload = (e) => {
       const content = e.target?.result;
       if (typeof content === 'string') {
          const myArrayObj = JSON.parse(content);
       }

My problem is that I want to save a single setting object (mySettingObject) into the file, before this array. How do I do that? How do I retrieve the setting object and array later?

could you try new Blob([JSON.stringify([mySettingObject, myArrayObj])], { type: 'application/json' }); — Naren Murali
– Naren Murali, Commented Nov 3, 2024 at 15:53
sounds like XY problem. could you add more context, what is the goal, why are you storing it in a file, instead of sharing it via service etc. — traynor
– traynor, Commented Nov 4, 2024 at 7:56
I am just doing a simple POC so don't intend to complicate things too much by adding a login mechanism and service. The setting object will just be some preference setting, and is something good to have. — simon thismyvoice
– simon thismyvoice, Commented Nov 4, 2024 at 14:46

Brad · Accepted Answer · 2024-11-04 01:56:44Z

1

My problem is that I want to save a single setting object (mySettingObject) into the file, before this array.

You can't. At least, not directly.

Normally, JSON parsers only work on one root object. Therefore, you'd have to serialize an entire object that contains your array as well.

JSON.stringify({
  mySettingsObject,
  myArrayObject
});

In this case, there's a singular root object that you can reference properties on, which is perfectly fine.

An alternative... there is a variant of JSON that uses line delimiters called ND-JSON. This allows multiple root objects, but the usual use of it is for multiple objects of the same or similar type. While this isn't a requirement, I'd think your use case is inappropriate.

answered Nov 4, 2024 at 1:56

Brad

164k57 gold badges381 silver badges559 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naren Murali · Accepted Answer · 2024-11-04 01:33:43Z

We can create a complex object, with two properties settings (which holds mySettingObject) and array, then we perform the download.

downloadFile() {
  const mySettingObject = {
    qwerty: 1,
  };
  const myArrayObj = {
    settings: mySettingObject,
    array: [{ test: 1 }, { test: 2 }, { test: 3 }],
  };
  const myFileName = 'test';
  const blob = new Blob([JSON.stringify(myArrayObj)], {
    type: 'application/json',
  });
  this.saveAs(blob, `${myFileName}.json`);
}

saveAs(blob: any, filename: any) {
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  window.URL.revokeObjectURL(url);
}

On upload we use the FileReader, readAsText to read in UTF-8 format. Finally, we again re-access these properties using the same property names.

onSelectFile(event: any) {
  this.selectedFile = event.target.files[0];
  const fileReader = new FileReader();
  fileReader.readAsText(this.selectedFile, 'UTF-8');
  fileReader.onload = () => {
    const data = JSON.parse(<string>fileReader.result);
    console.log('settings', data.settings);
    console.log('settings', data.array);
  };
  fileReader.onerror = (error) => {
    console.log(error);
  };
}

Full Code:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <button (click)="downloadFile()">download</button>
    <hr/>
    <input type='file' (change)="onSelectFile($event)">
  `,
})
export class App {
  name = 'Angular';
  selectedFile: any;

    downloadFile() {
      const mySettingObject = {
        qwerty: 1,
      };
      const myArrayObj = {
        settings: mySettingObject,
        array: [{ test: 1 }, { test: 2 }, { test: 3 }],
      };
      const myFileName = 'test';
      const blob = new Blob([JSON.stringify(myArrayObj)], {
        type: 'application/json',
      });
      this.saveAs(blob, `${myFileName}.json`);
    }

    saveAs(blob: any, filename: any) {
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = filename;
      a.click();
      window.URL.revokeObjectURL(url);
    }

    onSelectFile(event: any) {
      this.selectedFile = event.target.files[0];
      const fileReader = new FileReader();
      fileReader.readAsText(this.selectedFile, 'UTF-8');
      fileReader.onload = () => {
        const data = JSON.parse(<string>fileReader.result);
        console.log('settings', data.settings);
        console.log('settings', data.array);
      };
      fileReader.onerror = (error) => {
        console.log(error);
      };
    }
}

bootstrapApplication(App);

Collectives™ on Stack Overflow

How to write and read different JSON objects as BLOB in file using angular

2 Answers 2

Comments

Full Code:

Stackblitz Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Full Code:

Comments

Your Answer

Sign up or log in

Post as a guest

Related