Tips for accessing and modifying local files in Angular 2

Is there a method in Angular 2 to access files from an absolute path?
I have utilized the 'filesaver' library for file saving, storing the files
locally in txt/json formats.
For instance: 

let blob = new Blob([document.getElementById('exportFile').innerHTML],{ 
    type: "text/plain;charset=utf-8"
});
saveAs(blob, "export.json");

Now I am interested in reading and editing the export.json file. How can I reference it for future use?
Are there alternative methods or reputable libraries available for these
tasks?

angulartypescriptfilesystemsangular2-routingangular5

Answer №1

If you want to access the content of your file, you can achieve this by using HttpClient in Angular.

public getFileContent(): Observable<any> {
         return this.http.get("./data.json")
                         .map(response => {var content = response.json(); return content});
}

Unfortunately, performing write operations like put or post directly to the file is not supported. However, I suggest using the 'jsonfile' library for this purpose: https://www.npmjs.com/package/jsonfile

I hope this information proves to be useful to you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why doesn't the primitive value get updated in Angular Service?

I've been exploring the functionality of Angular Services, and I'm encountering an issue with the heroCounter (number) not updating correctly while the hero array does. When I add a new dummy hero, I expect the heroCounter to increment accordingl ...

angularangular-servicesinjectable

Having trouble locating module '@angular/http'?

In the configuration file systemjs.config.js for my Angular 2 application, I included the following entry in the map object: '@angular/http': 'https://npmcdn.com/@angular/http' While trying to import '@angular/http' at the b ...

angular

Creating dynamic components in Angular 2 and adding them to the view container of the body

I've been grappling with the challenge of dynamically generating a component and then adding it to the document tag. My struggle lies in figuring out the proper method for selecting the body's ViewContainerRef so that I can easily append a new co ...

angular

Utilizing Class Types in Generics with TypeScript

Struggling to implement a factory method based on the example from the documentation on Using Class Types in Generics, but hitting roadblocks. Here's a simplified version of what I'm attempting: class Animal { legCount = 4; constructor( ...

typescript

The dispatch function of useReducer does not get triggered within a callback function

Can anyone assist me with this issue I am facing while using React's useReducer? I'm trying to implement a search functionality for items in a list by setting up a global state with a context: Context const defaultContext = [itemsInitialState, ...

reactjstypescriptreact-hooksreact-contextuse-reducer

Webpack: The command 'webpack' does not exist as a recognized cmdlet, function, script file, or executable program

Attempting to set up a new project using webpack and typescript, I have created the project along with the webpack file. Following the instructions on the webpack website, I successfully installed webpack using npm install webpack webpack-cli --save-dev ...

typescriptnpmwebpack

The role of providers in Angular applications

After creating a component and service in my project, I followed the documentation's instruction to include the service in the providers metadata of the component for injection. However, I found that it still works fine even without mentioning it in t ...

javascriptangulartypescriptdependency-injectionangular-providers

What is the best way to dynamically translate TypeScript components using transloco when the language is switched?

I am seeking clarification on how to utilize the TranslocoService in TypeScript. Imagine I have two lang JSON files for Spanish and Portuguese named es.json and pt.json. Now, suppose I have a component that displays different labels as shown in the followi ...

angulartypescripttransloco

Prisma Remix is throwing a TypeError: "The function (0, import_prisma.createNote) is not defined as a function."

In my project, I wrote a function using the prisma client which is being called from the notes.tsx route in remix. export async function createNote(entity: { title: string, description: string }) { const note = await prisma.note.create({ data: ...

typescriptprisma

Learn how to retrieve data from a JSON server in Angular 8 and then sort that data in a table by utilizing checkboxes

Currently, I'm in the middle of an Angular project where I could use some assistance on how to filter data through checkboxes within a table. The setup involves a home component that displays data from a JSON server in a tabular format using a service ...

javascriptangularangular6angular7angular8

receiving a null value in the JSON response

Preparing for the client to register. This function is responsible for registering a client. registerAsClient(){ this.loading =this.loadingCtrl.create({ content:"Setting up Account" }); this.loading.present(); this.buildClientData(); console.log( ...

angulartypescriptionic-frameworkionic2

What is the best way to display multiple items on a single page using the Ant Design (NG-Zorro) carousel component?

Hey there, I'm looking for a way to display multiple items per page using the ant design (NG-Zorro) carousel. I found some information on their website here: What I'm aiming for is to have something like this - Multiple Items If you have any i ...

angulartypescriptcarouselantdng-zorro-antd

Struggling to accurately convert the string into a date object

I have an array of objects structured like this: const days = [ { _id: 12312323, date : '30/12/2021', dateStatus : 'presence' }, ... ] I am looking to convert the date property from a string to a Date object using the follo ...

javascripttypescript

Combining data types to create a unified set of keys found within a complex nested structure

This problem is really testing my patience. No matter what I do, I just can't seem to make it work properly. Here's the closest I've come so far: // Defining a complex type type O = Record<'a', Record<'b' | 'x& ...

typescripttypescript-generics

What is the best way to programmatically generate a service within Angular?

Is there a way to dynamically create services at runtime using a string name (like reflection)? For example: let myService = new window[myClassName](myParams); Alternatively, you could try: let myService = Object.create(window[myClassName].prototype); m ...

angulartypescript

Utilizing Angular Observables to Consume a REST API

Recently, I developed a REST API using Flask. However, when I tried to integrate it with my Angular web app, I encountered some errors. Despite following the steps outlined in the official documentation: https://angular.io/tutorial/toh-pt6 getBills(): voi ...

angularrest

Creating a stream of observables in RxJs and subscribing to only the latest one after a delay: A comprehensive guide

I am trying to create a stream of Observables with delay and only subscribe to the last one after a specified time. I have three HostListeners in which I want to use to achieve this. I would like to avoid using Observable form event and instead rely on H ...

angulartypescriptrxjsobservable

Dependencies for Angular2 Material components on npm

I currently have the following dependencies listed in my package.json for npm to locate and install. "@angular/material": "2.0.0-beta.1" "angular-material": "^1.1.1" If I want to utilize the most up-to-date versions, what exactly should I specify? I am s ...

angularnpmangular-materialangular2-directives

Why is Angular ng-block-ui not functioning properly in Angular 7?

Within my app.module.ts file import { BlockUIModule } from 'ng-block-ui'; imports: [ BrowserModule, BlockUIModule.forRoot(), ] Inside the dashboard component: import { BlockUI, NgBlockUI } from 'ng-block-ui'; export class Da ...

angularangular7blockui

At what point are routed components initialized?

Here is a route setup I am working with: path: ':id', component: ViewBookPageComponent }, After adding this route, an error keeps popping up: Error: Cannot read property 'id' of null I haven't included a null check in the compo ...

javascriptangulartypescript