Having trouble retrieving JSON data from an external URL in AngularJS when making a $http.get call and using the success method?

Code in the Controller.js file:

let myApp=angular.module('myApp',[]);

myApp.controller('myController', function($scope,$http){

    $http.get('data.json').success(function(data){
        $scope.art=data;
    }); 
});

Answer №1

To store the response, make sure to assign it to $scope.art

var myApp=angular.module('myApp',[]);

myApp.controller('myController', function($scope,$http){

    $http.get('data.json').success(function(response){
        $scope.art=response;
    }); 
});

Please note: The .success and .error methods have been deprecated in AngularJS 1.6

Instead, use .then

var myApp=angular.module('myApp',[]);

myApp.controller('myController', function($scope,$http){

    $http.get('data.json').then(function(response){
        $scope.art=response.data;
    }); 
});

Answer №2

let app=angular.module('app',[]);

app.controller('mainController', function($scope,$http){

    $http.get('data.json').then(function(result){
        $scope.data=result.data;
    }); 
});

Give this a try and see if it works for you!

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

Updating the LockedException from Spring Security to return a different status code to Angular.js

I am currently using a combination of Spring 4, Hibernate 4, and Spring Security (RESTFul Webservice API) along with Angular on the front-end. I am relatively new to all of this. The failure handler in my code is structured as follows: @Component ...

Measuring data entries within JSON array utilizing JavaScript and Postman

A specific component is returning two records: { "value": [ { "ID": 5, "Pupil": 1900031265, "Offer": false, }, { "ID": 8, "Pupil": 1900035302, "Offer": false, "OfferDetail": "" } ] } My task i ...

Sending an HTTP post request with form data and various field controls will not be directed to a Java backend

Recently, I've started working with AngularJs and I'm facing an issue with uploading image files along with their labels through a Jax-RS post rest API. My problem is that the control in my AngularJS controller is not entering the Java post API. ...

How to change from using position: sticky to fixed after scrolling to a specific div

Is there a way to transition the position of sticky content from sticky to Fixed while scrolling down and moving to the next rows, keeping it fixed until just before the footer, where it should scroll again? For example, <!DOCTYPE html> <html ...

The art of sketching precise lines encircling a circular shape through the

What is the best way to use a for loop in JavaScript to draw lines around a circle, similar to those on a clock face? ...

Retrieve the element that triggered the event listener within Nuxt

I am currently developing a Nuxt project where I have set up my component using the code below. The select-parent-container has a click event attached to it. Whenever this event is triggered, I need to identify and return the specific parent container that ...

Is there an easy method for customizing scrollbars?

I'm looking to include an "overflow:scroll" in a navigation div, but the default scrollbar on windows is unattractive. Is there a simple way to customize the scrollbar without having to download extra JavaScript libraries, APIs, and so on? ...

Tips for choosing Week Range values with Selenium WebDriver

Currently, I am working with Selenium WebDriver and I am trying to figure out how to select week range values from a dropdown menu at once. I have a dropdown called Period, which, when selected, automatically reveals additional dropdowns for From week and ...

What is the best way to populate a select box with the previous value in AngularJS?

My issue involves a select box with ng-options. I am attempting to load the previous value by default, which is stored as {{c.fact}}. I have tried using ng-value="c.fact" within the select box, but it did not work as expected. Can someone please provide ...

When using the mui joy library, obtaining the input value upon submission may result in the retrieval of an "unidentified" response

Struggling to fetch user input for 2FA authentication using the mui JoyUI library. Attempted using e.target and searching for input value with no success. Clearly missing something in the documentation. Also gave 'useRef' a shot, but the code sni ...

The Protractor option is nowhere to be found on the Run Configuration popup window in Eclipse

Issue with Protractor in Eclipse: Unable to locate Protractor option on Run Configuration popup. Despite following the steps outlined in http://www.protractortest.org/#/ and this guide on configuring Protractor with Eclipse (specifically the 2 Answer step ...

Verify authentication on a SignalR console application using a JavaScript client

Here is the scenario and solution I am currently working on: In project one, I have a SignalR console application that handles the logic, including authentication using Entity Framework to query the database. In project two, I have an ASP.Net web applicat ...

Convert a Java object instance into a JSON format via serialization

Is there a way to convert any Java object instance into JSON format? Specifically, I am looking to serialize a group of InetAddress objects. { "Client1":addr1 "Client2":addr2 } In the above example, addr1 and addr2 represent instances of the Inet ...

Validation of Numbers and Characters in DevExpress ASP.NET TextBox

When I try to use masking on the textbox for credit card format, I am having trouble entering a hyphen. It seems that the validation does not accept dashes as I only checked for numbers. Any help would be appreciated. Thank you. <script> functio ...

deployJava.js injects a new <embed> element into the header section of the webpage

I've ran into an issue with the Java applets on my website. I included the deployJava.js load tag in the head section of the page, but when I look at the resulting HTML in Chrome debugger, this script seems to be breaking my head content and starting ...

Error: The specified module '/node_modules/.vite/vue.js?v=31b05063' does not export the required 'default' element

I am struggling to find a solution to this problem in my vue3.js project. The console is showing an error related to the import statement in pinia store. I attempted changing the first line of the import to "import Vue from 'vue';" (without curly ...

Adding an object to a document's property array based on a condition in MongoDB using Mongoose

I have a situation where I need to push an object with a date property into an array of objects stored in a MongoDB document. However, I only want to push the object if an object with the same date doesn't already exist in the array. I've been e ...

Function compilation did not succeed in the module

I've put together a MERN (MongoDB, ExpressJS, React, Node) project using express-generator (express myNewApp). Within a react component, I have implemented this ES6 code snippet: onChange = (event, { newValue }) => { // Line 53 this.setSt ...

Combining Mongoose query results in a for loop: A step-by-step guide

i am trying to combine the results of a mongoose query into a single JSON object. however, i am encountering an issue where i am passing an array to mongoose. specifically, the array looks like this: Modem Serial: [11111111111,nodata,3333333333333333] wh ...

The function was not invoked as expected and instead returned an error stating "this.method is not

I need help with an issue in my index.vue file. The problem lies in the fancy box under the after close where I am trying to call the messageAlert method, but it keeps returning this.messageAlert is not a function Can someone please assist me in resolving ...