Is there a way to refresh a JSON file in an Angular app without needing to recompile the entire application?

I am currently extracting information from a JSON file stored in my assets folder and displaying it in a table format. At the moment, the JSON file is only loaded during the Angular application build process. I want to make it possible to dynamically load or delete this file even after the application has been built.

The specific file I want to fetch dynamically is located in 'src/assets/data/'

This is how I am retrieving the JSON file:

export let MyData: MYDATA[] = require('src/assets/data/MyJSON.JSON');

In the end, my goal is to be able to update or remove the JSON file in the assets folder, which would automatically reflect changes in the MyData variable and update the table. This way, I wouldn't have to run ng build every time the JSON file is modified.

angulartypescript

Answer №1

If you want to keep track of changes in a JSON file, consider using the setInterval function.

setInterval(function(){ 
   MYDATA = require ('src/assets/data/MyJSON.JSON');
}, 5000); // Check for changes every 5 seconds

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

I am encountering an issue where the `this.http.post` method in Angular 4 is not sending parameters

I have been working on setting up a login system and am trying to send the parameters to the PHP server using my Angular app. Here is a snippet of my code: return this.http.post<any>('/s/login/index.php', { username: userna ...

phpangulartypescriptpost

JavaScript: Manipulating Data with Dual Arrays of Objects

//Original Data export const data1 = [ { addKey: '11', address: '12', value: 0 }, { addKey: '11', address: '12', value: 0 }, { addKey: '12', address: '11', value: 0 }, { addKey: &a ...

javascriptnode.jstypescript

Symbol assignment is not supported for Power BI Scatterchart data points (argument of type 'Symbol<{}>' is not assignable to parameter of type 'Primitive')

I am facing an issue while trying to associate symbols with data points in a Power BI scatterchart using d3. Initially, I managed to make all of them crosses by utilizing the following code: .attr("d", d3.svg.symbol().type("cross")) My aim was to further ...

d3.jssvgtypescriptpowerbi

Exploring the inner workings of Angular v4.4 and gaining insight into the roles of platformBrowserDynamic and PlatformRef

Recently, I have come into possession of an Angular 4.4 application that utilizes Webpack v3.5 and TypeScript v2.3.3. Struggling to decipher the imported code, I am at a loss understanding its functionality and correctness. To simplify matters for analysis ...

angulartypescript

Challenge encountered while populating dropdown in Angular reactive form

When using template-driven forms, I was able to populate dropdowns. However, now that I'm using material reactive form, I am unable to do so. My goal is to populate the "country" dropdown and then call an "onstatechange" event later on to populate the ...

angularangular-materialangular-reactive-forms

How to display an object in the template that does not have a specified property

I am dealing with an object that can have a type of WithBalance | WithoutBalance withBalance : { balance:number, name:string } withoutBalance : { name : string} <span>{{object?.balance ?? 0}} </span> However, when I attempt to access the bal ...

angulartypescript

Fixing the issue of 'Unrecognized character < in JSON at position 0 at JSON.parse'

I have recently deployed my Angular 6 application on Heroku at . However, upon deploying, I encountered the error message: SyntaxError: Unexpected token < in JSON at position 0 during JSON.parse. I am aware that this error occurs when the response ret ...

jsonangularexpressroutes

Removing the outer array of objects can be achieved by using a variety of

My goal was to eliminate the outer array of objects. I attempted to achieve this by using the code below: export class AppComponent implements OnInit { name = 'Angular'; EmployeeData=[ {"name": [{ "grade": &quo ...

javascriptangular

Error encountered: Unable to locate React Node during FaC testing with Jest and Enzyme

In my React Native app, we recently integrated TypeScript and I'm in charge of migrating the unit tests. One particular test is failing unexpectedly. The app includes a <LoginForm /> component that utilizes Formik. //... imports export inte ...

typescriptreact-nativejestjsenzymeformik

Ensure that the default boolean value is set to false rather than being left as undefined

I have a specific type definition in my code: export type ItemResponse = { .... addedManually: boolean; .... } Whenever I parse a JSON response into this type, I encounter an issue: const response = await fetch( `https://api.com` ); con ...

javascriptreactjstypescriptreact-native

Running PHP scripts within an Angular2 CLI application

I'm currently working on an Angular 2 app using Angular CLI, but I've noticed that the PHP files are not being compiled correctly. I'm curious if the server that is included with Angular CLI supports PHP. If not, do you have any recommendati ...

angularangular2-cli

Include a string in every tuple

I am trying to define a new type: type myNewType = 'value-1' | 'value-2' | 'value-3' Is there a way to create another type like this? type myNewType2 = '1' | '2' | '3' However, I want the outpu ...

typescripttuples

What is the best way to integrate a Node object into Angular?

Is there a way to access an object created in Node within an Angular application without using handlebars or setting global variables on the window? In Node # server.js const app = express(); app.use('/', () => { const foo = {name: ' ...

node.jsangularexpress

What causes Omit's unusual behavior when indexed keys are present in the type?

Consider this simple scenario: type Alpha = { children: any; size?: string; }; type Beta = Omit<Alpha, 'children'>; // I understand the type of Beta. type Gamma = { [x: string]: any; children: any; size?: string; }; t ...

typescript

I want to remove an object from my Django Rest Framework (DRF) database using Angular 13

After receiving the id that needs to be deleted, I noticed that the last line of code in service.ts for the delete method is not being executed. The files and code snippets I utilized are: COMPONENT.HTML <li *ngFor="let source of sources$ | async ...

djangoangulardjango-rest-frameworkcrudangular-fullstack

Update the theme of angular library upon import

I am seeking information on how to create a common Angular library with custom styled components, such as size and font. My goal is to import this library into two separate projects, which I have successfully done so far. However, now I wish for each proj ...

javascriptcssangularsass

Signatures overburdened, types united, and the call error of 'No overload matches'

Consider a TypeScript function that takes either a string or a Promise<string> as input and returns an answer of the same type. Here's an example: function trim(textOrPromise) { if (textOrPromise.then) { return textOrPromise.then(val ...

typescripttypescript-generics

Using RXJS to emit additional values based on the incoming observable value

Being new to RxJs 6.0 (or any RxJs version), I find it powerful yet some basic concepts evade me. I have a scenario where I want to add an additional value to the output stream based on the source stream, but I'm struggling to figure out how to achie ...

typescriptrxjsrxjs6

The attribute 'value' is not present in the object of type 'Readonly<{}>'

My current project involves creating a form that will dynamically display content based on the response from an API. The code I am working with is structured as follows: class Application extends React.Component { constructor(props) { super(props); ...

reactjstypescript

Having trouble installing Popper.js?

I have encountered an issue while attempting to install popper.js in my angular project. ng new <<project>> cd <<project>> npm install popper --save npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules&b ...

angularnpmpopper.js