Exploring JSON data in AngularJS

After creating a new Angular App, I decided to store some data in a JSON file. My main concerns are where to best store the .json file within the app and how to access it.

Currently, I am facing this error in my Chrome console: GET http://localhost:8000/travelMap/stateData.json 404 (Not Found)

Even though this is a simple app, I want to ensure I follow best practices as I am still new to Angular/Javascript development.

I appreciate any help!

This is how my folder structure looks like: I would like to access the json in the travelMapCtrl and I've stored the json file in the same folder as this controller (travelMap) for now

Below is the JavaScript code where I am trying to access the json:

$http.get('stateData.json').then(function successCallback(response) {
    console.log(response);
  }, function errorCallback(response) {
    console.log(response);
  });

Answer â„–1

When using the $http service, it's important to remember that the path you pass to $http.get() should be relative to the root of your application, not relative to the controller's location.

To ensure that your JSON files are located correctly, create a "data" folder within the root app directory and place your stateData.json file inside it. Then, when making the API call, use the relative path from the root app folder. For example, if your root app is in the "app" folder, the API call should be:

$http.get("/data/stateData.json")

Your app structure should look like this:

LauraApp/app/app.js
LauraApp/app/data/stateData.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

Python pymysql encountering a syntax error when trying to insert a JSON object

Encountered the following error when trying to insert data into a SQL database table using Python: pymysql.err.ProgrammingError: (1064, 'You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the ...

My HTML file is not able to load my Javascript file

I'm currently working on integrating a JavaScript code for a show more and show less feature on my page. The goal is to limit the description so that it shows only a certain number of characters, with an option to expand or collapse the text. However, ...

Adding a space after a comma automatically upon saving changes in VSCode

Whenever I input code (t,s) into the system and make changes to it, it automatically transforms into (t, s) with an added space after the comma. Is there a way to avoid VScode from adding this extra space on its own? ...

Navigating through the various iterations of jQuery

Unique Case Study I'm currently facing a dilemma involving the integration of jstree and jquery-ui datepicker. The scenario is this: I am attempting to utilize jquery-ui-datepicker on an input element that is dynamically inserted into the DOM after ...

My div does not refresh when using .load

I implemented ajax to retrieve the start time and end time from another page, and used setInterval to call this function every second like so. setInterval(function () { CheckTime() }, 1000); function CheckTime() { $.ajax({ url: "Get_TIme. ...

Connecting a variety of Android devices to a SQL server using REST for seamless synchronization

I have an Android application that allows users to input data into a server using REST, Volley, and JSON. The functionality is simple - the user can read existing data from the server with one REST request, and add new data which gets sent to the server on ...

Unable to retrieve res.user.username while using passport within express-session

I'm currently diving into the realm of creating sessions with Passport.js and Express.js. My goal is to retrieve the username from a user stored in a session using res.user.username, but I seem to be facing some challenges. Below is the snippet of m ...

Having trouble with the installation of [email protected] on Windows 10 x64?

I am currently in the process of setting up hiredis on my Windows 64-bit operating system as it is a requirement for the node-celery package. My system specifications are as follows: Node v7.9.0 npm v4.5.0 Visual Studio Community 2013 with Update 5 (en_ ...

Incorporating asynchronous file uploads to a server using a for loop

I am in the process of transforming my original code into "async" code. The initial code queries the database and retrieves the results, which includes images. I want to optimize writing the images asynchronously to my nodejs server as the current synchro ...

Issue with AngularJS where the value in a dropdown list does not bind to ng-model if there are no changes made

Please check out my plunkr for reference: https://plnkr.co/edit/QRQQmxf3ZDyh6o0CqtrD?p=preview I have a form with a dropdown list that is dynamically populated as shown below: <form name="frmAccount" role="form" ng-submit="submit()"> <div ...

Expanding rows in Angular UI-Grid: Enhancing user experience with hover functionality

Struggling to add a hover effect to the rows in an Angular UI grid. The goal is for the entire row to change background color when hovered over, but with an expandable grid that includes a row header, applying CSS rules only affects either the row header o ...

Determine the quantity of characters available in a contenteditable field

I have implemented a directive that allows me to input editable content inside a tag Recently, I made modifications to include a character counter feature. However, I noticed that when I add line breaks, the character count increases erroneously. https: ...

Navigating with the keys is disabled until an item is chosen

Currently working on a Shopify website for a client and encountered an issue where the keys don't scroll down upon page load unless a specific element is clicked or tab is used. I am not sure what caused this unexpected behavior, it may have occurred ...

Scraping dynamic content with Python for websites using JavaScript-generated elements

Seeking assistance in using Python3 to fetch the Bibtex citation produced by . The URLs follow a predictable pattern, enabling the script to determine the URL without requiring interaction with the webpage. Attempts have been made using Selenium, bs4, amon ...

Uncheck the previous option selected in a multi-select dropdown using jQuery

Hey there, I've been facing an issue with my change handler when trying to add or remove values from an Array. It works fine until the last element is selected, at which point the change event does not fire properly. Has anyone else encountered this p ...

Build a Search Suggestions feature with Node Package Manager (NPM) and Model-View-Controller (M

Stepping into the exciting world of MVC core and harnessing NPM for JavaScript packages has been a learning curve. However, I've encountered an issue that requires some deliberation on the best course of action for resolution. To provide context, I ha ...

Ways to access and delete the canvas using ref steps?

Having a canvas in a react component, I utilized react refs to access the node and implemented a destroy() method. However, I encountered an error: TypeError: canvasRef.current.destroy is not a function How can we properly access the node (canvas) using r ...

Unable to reset HighCharts Speedometer value to zero

I am currently experimenting with implementing the highcharts speedometer. The goal is to simulate a connection meter - when there is a good connection, the meter should display values between 30 and 100. If the connection result from an Ajax call is any ...

Connect the property of a class to a property within a nested object

This is the issue I am facing: I have a class called A in my dataModel class: public class A { public string name { get; set; } public string address { get; set; } public string addressType { get; set; } public A() { this.nam ...

When working with ReactJS and NextJS applications, the variables declared in the .env file may sometimes be received as undefined

In my .env.local file, the following variable is defined: REACT_APP_API_PATH=http://localhost:3600/ The .env.local file can be found at the root level of the project directory. Here is how I am attempting to utilize this variable: console.log('node ...