In Angular with rxjs, make sure the response is set to null if the json file cannot be found during an http.get request

When working on my Angular app, I often retrieve data from a static JSON file like this:

@Injectable()
export class ConfigService {
  constructor(private http: HttpClient) { }

  getData() { 
    this.http.get('/assets/myfile.json').subscribe(data => {
        console.log(data);
    })
  }

}

However, there are situations where myfile.json may not exist, which is necessary for other purposes. In such cases, I want to avoid getting this error:

HttpErrorResponse : Http failure during parsing for https://localhost:4201/assets/myfile.json

Instead, I simply want to receive a null response.

Any suggestions on how to achieve this?

Answer №1

According to feedback provided, a solution involves utilizing the catchError operator in the following manner:

retrieveData() { 
    this.http.get('/assets/myfile.json')
      .pipe(catchError(error => of(null)))
      .subscribe(result => console.log(result))
  }

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

Click on the button to open the generated link in a new tab

How can I efficiently open a URL in a new tab after making an API call with the click of a button? Currently, the button triggers the API call and generates the URL. <button (click)="getUrl()">Connect</button> In TypeScript: getUrl() ...

Having Trouble with Imported JavaScript File in Astro

Why isn't the js file working in Astro when I try to import or add a source in the Astro file? For example: <script src="../scripts/local.js"></script> or <script>import '../scripts/local.js'</script> I am ...

Discovering React components within a shadow DOM utilizing TypeScript and Protractor [

I am currently faced with the challenge of locating elements within a shadow root from 9-11. Traditional locators like xpath, css, and id have proven unsuccessful in this scenario. However, I was able to successfully locate the element using JavascriptExec ...

Discovering all imported dependencies in a TypeScript project: A step-by-step guide

Currently, I am attempting to consolidate external libraries into a vendor bundle through webpack. Instead of manually listing dependencies, I would like to automate this process by scanning all TypeScript files in the directory and generating an array of ...

What is causing the issue of URL parameters becoming undefined when performing service injection in the app component?

When working with a service that reads parameters from the URL, everything seems to be functioning properly until attempting to inject the service into the constructor of the app.component.ts file or trying to call a service method from the app.component.t ...

Unit testing of an expired JWT token fails due to the incorrect setting of the "options.expiresIn" parameter, as the payload already contains an "exp" property

I am having trouble generating an expired JWT token for testing purposes and need some guidance on how to approach it. How do you handle expiration times in unit tests? This is what I have attempted so far : it('should return a new token if expired& ...

Tips on sorting through an array using Angular 11 and data

I'm working on a subpage that contains a large amount of detailed data in the form of thousands of records. I want to filter this data based on the "id" from my route, which is also included in the dataset. However, I've run into some difficultie ...

Exploring the power of ES6 Generator functions in conjunction with SailsJS

Utilizing generators in nodejs is a game changer for me. They really enhance the server-side feel of my code. I've been experimenting with incorporating generators into my Sails app. Here's an example where my controller successfully works when I ...

The index type 'X' is not allowed for use in this scenario

I encountered an issue in my TypeScript code: error message: 'Type 'TransitionStyles' cannot be used as an index type.' I'm wondering if there's a way to modify my interface so that it can be used as an index type as well: ...

Inactive function

I have a function that inserts my articles and I call this function on my page. There are no errors, but the next function retrieveAllArticles() is not being executed. public saveAllArticles(article) { for(let data in article) { this.db.exec ...

Is the Dropbox JavaScript SDK compatible with Ionic3?

Does anyone know how to integrate the Dropbox JavaScript SDK into an Ionic 3 app? Just a note: I have come across some sample examples using the http endpoint. ...

Acquire the property that broadens the interface

I'm currently working on a TypeScript function that aims to retrieve a property from an object with the condition that the returned property must extend a certain HasID interface. I envision being able to utilize it in this manner: let obj = { foo ...

Guide to loading a minified file in Angular 2 with Gulp Uglify for TypeScript Bundled File minimization

In my Angular 2 application, I have set the TypeScript compiler options to generate a single outFile named Scripts1.js along with Scripts1.js.map. Within my index.html file: <script src="Scripts/Script1.js"></script> <script> ...

The mat-pagination component's mat-select feature is displaying unusual behavior

In a recent project I have created, users need to perform CRUD operations and view the output in a table. Everything is functioning properly, however, there are instances where the "mat-select" within the "mat-paginator" starts behaving strangely. This iss ...

How can a child component trigger an event in its parent component?

Currently, I have tabs implemented with a form and a button in tab1. In the parent component, there is an event that deactivates the current tab and activates the next one. Can anyone advise on how to call this event from the child component? gotosecond ...

The Angular 2+ page fails to load properly on Internet Explorer or SharePoint

I created an Angular 5 solution that functions well in both Chrome and Firefox within SharePoint 2013. However, I have run into issues when using IE11. The index.html file was inserted into the SharePoint page using a Content Editor web part. Even after di ...

Running an Angular application on dual hosts

Is it possible to host the same Angular application on multiple hosts, such as different IP addresses or ports, using Node.js? ...

Issue with Redis cache time-to-live not adhering to set expiration

I have encountered an issue while using IoRedis and DragonflyDB to implement rate limiting in my web application. Despite setting a TTL of 5 seconds for the keys in the Redis DB, sometimes they do not expire as expected. I am struggling to understand why t ...

Issue with Angular component inheritance where changes made in the base component are not being

click here to view the example on your browser base component import { Component, ChangeDetectorRef, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-base-component', template: `<p> <b>base</b> ...

TypeScript Type Mapping for HTML Element Tags

I am currently working on a TypeScript + React project and facing an issue with the polymorphic as prop in one of my components. Specifically, I want to restrict this prop to only accept HTML tags, excluding ReactNodes or JSX Elements. Unfortunately, I hav ...