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

Guide on displaying several items from Laravel to Vue through the JavaScript filter method?

I need help transferring multiple objects from laravel to vue and filling my vue objects with information retrieved from the database. This is the data received from laravel: Vue objects to be populated: storeName: {}, storeUrl: {}, appName: {}, ...

An issue has been encountered at the header component of an Angular web application, identified as error code

I recently created a small Angular web application and decided to create a Header component using the command line ng g c Header. I then proceeded to write a brief paragraph in the header.component.html file. <p>header works!</p> An example o ...

Is there a way to rotate the custom marker icon in vue2-google-map?

After reading the documentation, I discovered that using path is the only way to rotate the marker. In an attempt to customize my marker, I created my own PNG image. However, I have been unsuccessful in overriding the CSS of the marker. I even tried to ov ...

Invoke a function from a different source in JavaScript

Below is the JS function implemented: function addMemberToLessonDirect(id) { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } ...

What is the best method for converting a geopandas dataframe containing multi-polygons into geojson format?

Currently, I am working with a Geopandas data frame that contains multi-polygon geometries. My goal is to convert this data frame into geojson format. To do so, I initially converted the dataframe into a dictionary and then utilized json.dump(dict) to tran ...

Having trouble retrieving the data from the angular app factory

I'm attempting to pass a variable between controllers using Angular's Factory. Here is the code snippet I have for this: var app = angular.module('chartApp', ['ngRoute']); app.factory('UserVerified', function() { ...

Unlocking the Power of Typescript and ReactJS: Maximizing Efficiency with Previous State

I'm encountering difficulties implementing the previous state in React 18 with Typescript version 4.8.3. Here is my refreshToken code and I'm receiving the following error: Value of type '(prev: any) => any' has no properties in c ...

angular failure to assign a variable to $scope

When communicating with the Node server, I am able to receive a response message in the controller. However, there seems to be an issue with assigning it properly. .controller('someCtrl', function(exportExcel){ $scope.clickEvent = function() ...

The concept of undefined does not hold any tangible form

TypeError: undefined is not an object (evaluating 'this.props.data.map') appContent: displayData(){ let info = this.props.data.map(function(dataItem, index) { return ( <Card> <CardItem> <Body ...

Learn how to iterate over a JSON object using TypeScript in Angular5 to generate an array of objects

Here is a sample JSON code that includes an array "Customers" with objects and arrays nested inside: This is my JSON code snippet: { "Customers": [ { "customerData": { "secondLastName": "Apale", "firstLastName": "Lara", ...

What is the best approach to passing multiple variables to a JavaScript function in HTML/PHP?

Seeking help with calling a javascript function from PHP through embedded HTML code. Below is the script: <script> // THE FOLLOWING JAVASCRIPT FUNCTION REDIRECTS TO EDITUSER.PHP AND PASSES USERID VALUE. function startMaint(mo, yr){ ...

Acquiring a property from an object that is specified within a function

I have created an object with properties inside a function: function createObject() { const obj = { property1: value, property2: value } } How can I access this object from outside the function? Would redefining it like ...

Obtaining the width of a scrollbar using JavaScript in the most recent version of Chrome

Looking for a way to determine the width of the scrollbar using JavaScript for CSS purposes. I attempted the following: document.documentElement.style.setProperty('--scrollbar-width', (document.offsetWidth - document.clientWidth) + "px" ...

Clicking on a link in HTML with the onclick event

I am looking to create a button that will direct me to a different page. Here is the code snippet I have: <div align="right" ><input type="submit" id="logout" onclick="location.href='/login?dis=yes'" value="Sign Out" ></div>& ...

Error: Unable to locate the tslint command

After attempting to utilize tslint --fix, I encountered the error message bash: tslint: command not found.... To install tslint, I ran the following command: yarn global add tslint typescript. The operating system on my machine is Centos 7. ...

In Chrome, the `Jquery $('input[name=""]').change(function will not be triggered unless there is an unhandled error following it

Here is a script that I've created to make certain inputs dependent on the selection of a radio button. The 'parent' input in this case is determined by the radio button choice. Upon document load, the script initially hides parent divs of ...

Display the value in Vue.js as a price format while maintaining it as an integer

I have created a Vue component called "formatted-number" which takes in an integer value (e.g. 1234) and currently displays it as a string (e.g. "12.34") to represent a price in a textfield, with the appropriate "," or "." based on the country. However, I ...

Chrome and FireFox Encounter Ajax Functionality Issues

This script that I have created works flawlessly on Internet Explorer! However, it encounters a few issues when used on Chrome and Firefox. Specifically, it only functions correctly for the first action performed, but fails to do so for subsequent actions. ...

Tips for extracting JSON data from an API with identical names as values

I am working on a project to create a data search system using JSON. The JSON data is stored in a REST API, and the structure of the API is as follows: [ { "info": "cute but big animal", "type": "pig", ...

Encountering an issue with Next.js React SSR using styled-jsx: unable to access the 'state' property as

I've come across a problem that I can't seem to figure out. Despite my attempts to search for a solution here, I haven't been able to help myself. I'm new to javascript and react, so please bear with me. Issue: I'm using React (1 ...