Strategies for updating JSON file content as data evolves

I am facing an issue with loading a json file that populates charts. The file is generated from external data sources and stored in the asset directory. Is there a method to automatically load the updated json file?

I have attempted to include the code for reading the json file in the initialization, after it, or when requesting the data. However, it does not refresh with the new json file.

Here is how I import the data:

import accessioningAnalyticsDataNC from '../../assets/data/Accessioning-Analytics-NC-Data.json';

I have a function called getData which reads and processes the data.

getData(location: string) {
    // Function logic here
}

Unfortunately, despite trying different approaches, the new json file is not being read once it's placed in the assets directory.

Answer №1

For optimal efficiency, I suggest utilizing the Injectable service for retrieving and storing JSON data instead of importing it directly.

import accessioningAnalyticsDataNC from '../../assets/data/Accessioning-Analytics-NC-Data.json';

By subscribing to the injectable function, you can stay updated with the latest data changes.

Answer №2

One possible solution is to utilize the ngOnChanges life cycle hook provided by Angular. This allows you to monitor changes and update your JSON data accordingly from its source.

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

Analyzing a Typescript project using SonarQube Scanner on a Mac OS slave in Jenkins: A step-by-step guide

My current task involves examining a TypeScript project on Jenkins using the SonarQube Scanner plugin on a Mac OS slave. Software: Jenkins (version 2.32.1) SonarQube Scanner for Jenkins plug-in (version 2.5) SonarQube Scanner (version 2.8) SSH slave plu ...

Can someone provide guidance on integrating UI components with Angular 8?

I have developed my own custom component called app-button.ts. This component is responsible for checking the current user's roles and rendering the button only if it matches the defined roles. The ButtonType property is used to specify the style of ...

akka-http integrated with angular2 routing

Currently, I am facing an issue with serving my Angular2(rc3) app from akka-http (a Scala rest framework). The problem lies in routing. Whenever a request is made, spray attempts to locate /my/endpoint/declared/in/angular as a regular resource. How can I r ...

Maintain the default type for the generic type parameter

I am attempting to work around a few optional generic type parameters and keep them as defaults that have already been set. Here is a sample code snippet: interface Foo<T, T1 = string, T2 = boolean> { ID: T Name: T1 IsActive: T2 } There ...

Is it possible to conceal dom elements within an ng-template?

Utilizing ng-bootstrap, I am creating a Popover with HTML and bindings. However, the ng-template keeps getting recreated every time I click the button, causing a delay in the initialization of my component. Is there a way to hide the ng-template instead? ...

Having trouble capturing emitted events from a child component in Angular 2+?

I have a question as a beginner. I'm trying to send a message from the child component to the parent component but for some reason, it's not working. app.component.html <app-cart-component> [items]="rootItems" (outputItems)=&quo ...

Using Typescript to specify the parameter type of a function as a generic function

After creating a function called compose, it looks like this: const composeTyped = <T, U, R>(f: (x: T) => U, g: (y: U) => R) => (x: T) => g(f(x)); It appears to me that both functions f and g fall under the type fGeneric, which is define ...

Is there a method to add columns to an Angular material table dynamically?

I'm encountering an issue with creating dynamic tables using Angular Material tables. Since the table is reliant on an interface, I have a set number of columns. What I'm aiming for is to generate a table dynamically based on the server's re ...

Embedding a component inside another layout component in Angular

I'm attempting to insert a component into another layout component using a service, but I can't seem to get it working. Here is my current layout structure: AppComponent | AppLayoutComponent | ------------------------------------- ...

Exploring Nested <Routes> with ReactJs

My decision on whether to display the Foo page or the Bar page is based on the route. However, the Foo page itself contains two sub-routes for components to render depending on the URL path - such as FooOne or FooTwo. This results in having two layers of r ...

Leveraging the power of mat-option and mat-radio-button within a mat-select or mat-selection-list

I'm currently working on a unique form element that combines checkboxes and radio buttons to create a multi-level selection feature. For instance, you can use it to configure properties for a car where a radio option (Digital or FM) is dependent on t ...

Unable to automatically redirect to portal upon submission of form

After successfully logging the user into my app, I want to redirect them imperatively to the portal page. However, when I use the router.navigate() function, a few things happen that are causing issues. First, the app redirects to /portal. Then, it immedia ...

Angular version 4 JSONP request callback

Currently, I am working on the migration of an Angular 1 application to Angular 4. One particular challenge I have encountered is a jsonp call to an endpoint over which I have no control. In the Angular 1 app, the following code snippet is being used: js ...

What is the process for dynamically loading a component by its name in Angular 2?

I am currently incorporating dynamic loading of angular components in my application by using the following code snippet. export class WizardTabContentContainer { @ViewChild('target', { read: ViewContainerRef }) target: any; @Input() TabCont ...

``I'm facing an issue with Ionic 4's npm run build --prod command not functioning properly when deploying

Embarking on my first project with Ionic 4, I have previously worked with Ionic 3 where I used to build for the web using the command: npm run build --prod However, when attempting to build the Ionic 4 project with the same command, it generates an exces ...

Issue NG0203 encountered during material import attempt

I've been encountering an issue with importing material. Despite using code similar to the examples on material.angular.io, I keep running into the ""inject() must be called from an injection context..." error. My goal is to create a simple table ...

The result should display the top 5 application names based on the count property found within the ImageDetails object

data = { "ImageDetails": [ { "application": "unknownApp, "count": 107757, }, { "application": "app6", "count": 1900, }, { & ...

ExitDecorator in TypeScript

Introduction: In my current setup, I have an object called `Item` that consists of an array of `Group(s)`, with each group containing an array of `User(s)`. The `Item` object exposes various APIs such as `addUser`, `removeUser`, `addGroup`, `removeGroup`, ...

Which components can be interacted with in Protractor?

The element I am attempting to engage with utilizes the ng-sortable attribute and consists of a few draggable and sort-able divs. await viewTransaction.getEl('div#dragdrop-boundary').sendKeys(protractor.Key.ARROW_DOWN); Failed: element not inte ...

problems encountered when testing azure containerclient.listblobsbyhierarchy using sinon

I have developed a REST endpoint with the code "/files/lookup", which is designed to receive a query parameter folderPath and return a list of files with details, excluding content but including metadata. The endpoint connects to Azure Blob Stora ...