Having trouble fetching information from a JSON file stored in a local directory while using Angular 7

I am currently experiencing an issue with my code. It works fine when fetching data from a URL, but when I try to read from a local JSON file located in the assets folder, it returns an error.

 searchData() {
 const url: any = 'https://jsonplaceholder.typicode.com/photos?albumId=1';
 this.http.get(url).subscribe((res) => {
 this.data = res;
 console.log('Response Returned');
 },
  err => {
    console.log('Error Response');
  });

Output: Response Returned Expected: Response Returned

To fetch data from a local JSON file, I modified the path in the code to point to the local file within the assets folder. However, this change resulted in the code going to the error part and returning an Error Response.

Code for Local JSON file

searchData() {
     const ucv_data: any = 'src/assets/json/ucv_json.json';
    this.http.get(ucv_data).subscribe((res) => {
      this.data = res;
      console.log('Response Returned');
    },
      err => {
        console.log('Error Response');
      }
    );
 }

Output: Error Response Expected: Response Returned

Excerpt from Angular.json file

{
 // Angular configuration details
}

Answer №1

When referencing files, remember that the path is relative from the src folder. For example:

const data: any = 'assets/json/data.json';

Important Update

After reviewing the original poster's comment, it has been noted that the assets property definition includes:

"assets": [ 
  "src/assets/json", 
  "src/assets/images", 
  "src/favicon.ico" 
]

Therefore, when calling the file, refer to the location as /json/data.json.

Answer №2

Angular versions 7 and above allow for seamless JSON module imports.

To enable this feature, add the following lines to your tsconfig file:

{  "compilerOptions": {  "resolveJsonModule": true, "esModuleInterop": true } }

Once configured, you can import JSON files like this:

import data from "assets/json/data.json"

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

Error: accessing 'map' property of undefined during API retrieval

I am currently working on a project for a full stack blog site. I have successfully created an API for the back-end and it is functioning properly as I am able to retrieve posts from it. However, when I attempt to iterate through the posts using map, I enc ...

What is the best method in Selenium IDE for tracking an element based on its value?

While testing a website with Selenium IDE, I encountered an issue with the way elements are identified. The site utilizes something called "wickets" that change the ID of elements randomly, making it difficult for Selenium to record actions on certain elem ...

What is the process for generating flexible paths (URL strings) in angular applications?

Within my <app-parent> component, I have multiple buttons that each open a new floating panel on top of the parent. These floating panels also contain buttons that trigger the opening of additional floating panels, creating a stacking effect. My go ...

Chat Bot - EmbedMessage

JavaScript is still very new to me and I find the actual code quite challenging to grasp. However, I do have one specific question - how can I display the "cahbResponses" in a MessageEmbed? Despite consulting the Discord JS guides on MessageEmbeds, I' ...

Error arises when attempting to pass interface props to a component in a React Typescript application

I am currently delving into the world of React js and typescript. As part of my learning process, I have created a demo application that allows users to input their name and age. The app features an ErrorModal that should pop up on the screen whenever inco ...

Guide to fixing Vue app crashes caused by Web Sockets error

I'm encountering an issue with my Vue application as I am unable to load a specific page due to the app crashing. The console displays the following error, even though there is no implementation of Web Sockets in the app. Despite adding this snippet ...

Question from a student: What is the best way to transfer information between different classes?

Currently, I am delving into SPFX development. My focus is on constructing a form that incorporates multiple classes in order to gain insight on how they can interact and share data among one another. In this scenario, I have established two distinct clas ...

In Node.js, when accessing a Firebase snapshot, it may return a

Currently, I am utilizing Firebase functions to execute the code for my Flutter application. This code is responsible for sending push notifications to my app. However, I am encountering an issue where I receive a null value at snap.val(). Take a look at h ...

Accepting multiple file inputs in a form without using a selector, but instead utilizing the 'this' keyword or finding an alternative approach

When dealing with single file uploads, you can access the file input using this.image <form id="form"> <input type="file" name="image"> <input type="submit" name="submit"> </form> $ ...

Managing unanticipated errors in Express while utilizing async/await mechanics

Consider this TypeScript code snippet: app.get('/test_feature', function (req: Request, res: Response) { throw new Error("This is the bug"); }); app.use(logErrors); function logErrors (err: Error, req: Request, res: Response, next: NextFun ...

Dependencies in Angular 2 are essential for efficient functioning

Let's examine the dependencies listed in package.json: "dependencies": { "@angular/common": "2.2.1", "@angular/compiler": "2.2.1", "@angular/core": "2.2.1", "@angular/forms": "2. ...

Unique trigger for clicking events with customizable widgets in JQuery

I'm in the process of developing a jquery widget that functions similarly to a menu bar, featuring two buttons - ButtonOne and ButtonTwo. With my HTML code and associated styles in place, I've been focusing on creating a "hello world" widget. / ...

When attempting to add objects to an indexedDB object store, an InvalidStateError is encountered

I have defined IndexedDB and IDBTransaction dbVersion = 1; var db; var dbreq; var customerData = { ssn: "444", name: "Bill", age: 35, email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bbbebe92b1bdbfa2b3bcabfcb1bdbf"& ...

What is the best way to conduct tests on React components' methods and ensure they are integrated into my Istanbul coverage report

Is there a way to test the methods of react components and include them in my Istanbul test coverage? Edit: I'm using enzyme. Just wanted to mention that. Take, for instance, this component: class SearchFormContainer extends Component { static h ...

What is the rationale behind jQuery.each not using Array.forEach when it is accessible?

After delving deep into the codebase of the underscore library, I came across an interesting discovery. It seems that _.each relies on an ECMAScript 5 API called Array.forEach whenever it is available: var each = _.each = _.forEach = function(obj, iterato ...

Tips for preserving login session continuity following page refresh in Vuejs

signInMe() { this.$store.dispatch('setLoggedUser', true); this.$store.dispatch('setGenericAccessToken', response.data.access_token); this.errorMessage = ""; }, (error) => { if (error) { th ...

Is there a way to update Checkbox changes within a Datagrid without selecting the entire row?

My Table Cell Checkbox Behavior Issue: Within a table cell, I have a checkbox that changes upon clicking it. However, the change only occurs the first time. Subsequent clicks on the same checkbox do not trigger any change until I click outside the cell. T ...

Comparing the installation of TypeScript on Ubuntu utilizing npm versus native packages (via apt)

I'm looking to incorporate Typescript into my Ubuntu system and have come across two different methods to do so: Using sudo apt update && sudo apt install node-typescript -y Running sudo npm install -g typescript My main question revolves ar ...

Why is it that a website is loading at a snail's pace on Angular?

Working on my college project has been going smoothly, except for one issue with slow loading times. It's frustrating how long it takes to load. I suspect that there might be an error in the deployment process or something else causing the delay. The ...

Preserve data on page even after refreshing in Angular

Upon opening my website, I expect to see "Finance/voucher" at the top. However, after refreshing the page, only "Finance" appears which is not what I want. I need it to always display "Finance/voucher" even after a page refresh. I have included all the r ...