I am currently working on an Angular (2) application and I need to ensure that the view is updated whenever there is a change in the data from the back end.
getData() {
return this.http.get("some url")
.map(result => result.json());
}
What approach should I take to develop a listener within my component that can listen for these changes and update the view accordingly?
When faced with two different scenarios, the approach you take will depend on your level of access:
If you have the ability to modify the server code, implementing websocket support is an option. Utilizing a tool like https://github.com/ohjames/rxjs-websockets can help automate wrapping socket events into rxjs observables.
In cases where modifying server code is not possible, regular polling of the server becomes necessary. This would involve performing periodic requests to check for updates, as shown below:
Rx
.Observable
.timer(0, 1000) // every second
.mergeMap(_ => this.http.get("/url").map(json => result.json()))
If the server responds with a 304 http status code and no new data since the last call, you can efficiently handle these cases by filtering them out.
Hopefully, this information proves helpful in finding a suitable solution.
I am encountering an issue with the Javascript code on Ajax-loaded content. My form consists of multiple inputs that are loaded using the following Ajax code: function listfetch(typeval) { var shopid = document.getElementById("shopid").value; $.aja ...
I am working with a local 3D object model and I load it using the following code: const loader = new GLTFLoader(); loader.load("path/to/model", gltf => { scene.add(gltf.scene); }); I am trying to create a mesh out of the gltf object, but when I us ...
My webpage includes the following HTML code: <div class="new-nav"> </div> Below is my jQuery script: var div1 = " <div class=\"metro-nav-block nav-block-orange\">\n <a data-original-t ...
I'm facing an issue where I am trying to retrieve data using the axios get request and then updating it based on the response of another axios get request. However, I am unable to display the data from the second request. The following is a snippet o ...
Recently, I came across this shallowMounted vue component: <div class="card p-relative"> <div class="card-header"> <div class="card-title h4"> a lovely title <!----> <!----> </div> </div ...
I am facing an issue with two grid children occupying the same cell and both having click event listeners. As per the concept of event bubbling, I expect both event listeners to be triggered when I click on the cell. const outer = document.getElementByI ...
I am currently working on a Mongoify type that accepts a type T, removes the id key, and replaces it with an _id key. type Mongoify<T extends {id: string}> = Omit<T, "id"> & { _id: ObjectId }; function fromMongo<T extends ...
I am experiencing an issue with displaying a loading icon when a collapsible block is opening. Within the collapsible block, there is a dynamically populated listview generated through ajax/php. This list could potentially contain up to 500 elements, so I ...
I need to extract specific data from an array of objects and perform a calculation. For example, the provided data is as follows: const item = [{ "act": "Q", "line": 1, &quo ...
I can't seem to understand this problem in a general way using Typescript, any assistance would be greatly appreciated! A Factory needs to deploy a Contract A CustomFactory is a type of Factory and should deploy a CustomContract (which is also a Cont ...
Can someone help me troubleshoot this issue with config[curr][targetEnv] ??? interface EnvType { dev: string; staging: string; production: string; } type Config = { [key: string]: number | string | EnvType; }; const config: Config = { network ...
I am dealing with a form that consists of data organized in divs within a table-like layout. Each row represents a record, but when I retrieve the values using serializeArray, I'm having trouble distinguishing between each row. Below is an example of ...
Well, I have to admit that I usually don't resort to putting 'any' as the type when I'm uncertain what to do, but right now, I'm starting to feel quite frustrated. I'm currently working with Material UI date picker in conjunct ...
Currently, I am facing an issue with the push() method while trying to add cards to an array in a Deck object. This functionality was previously working fine for me, but recent modifications seem to have disrupted it. (The "testX" prints are included for d ...
I'm facing a problem with my index.html file while trying to incorporate a client-side include for my footer using JavaScript. Even though I've included the "footer.htm" file, it's not displaying properly on the page. I suspect there might b ...
I am currently using the ngx-bootstrap datepicker plugin. My goal is to have a specific date automatically highlighted when the date-picker loads. I have already stored this date in a variable and would like it to be selected/highlighted upon loading. com ...
I've developed a scalable application in OpenShift using MongoDb2.2 and NodeJs0.10, Unfortunately, I am unable to utilize Cartridge rockmongo-1.1 as it cannot be integrated into the scalable application, What is the best way for me to retrieve my da ...
Upon updating my Angular project to version 8, I encountered an error when trying to run ng-test --source-map false. Important: Despite thoroughly searching through my project code, I could not find any import of fs. As far as I know, there is no specific ...
I have a div element <div id="testResult" style="padding-left: 120px;"> My goal is to include text with newline character '\n' inside the div. However, when I view my html page, the text does not respect the newline character. $( ...
I'm working on a new project for a Facebook app that will allow users to map out their marathon route using Google Maps. I plan to utilize mySQL database records to store fixed points along the path (such as specific locations based on latitude and lo ...