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

Tips for styling the output of var_dump with an array

I currently have a script that retrieves an array from an API URL. <?php $url = 'https://api.example.com/v1/w'; $data = file_get_contents($url); $data = json ...

How to send a Django form using Django REST framework and AngularJS

Feeling a bit lost on how to handle form processing with django, django-rest-framework, angularjs, and django-angular. By using traditional Django techniques, I can generate a model form in my view and pass it over to my template. With the help of django ...

I can't seem to figure out why I keep encountering a runtime error whenever I attempt to create a basic route in the latest version of nextjs, version 13.5

Encountering an error while attempting to create a basic route in app/dashboard/page.tsx. The error message suggests that the contents are not a valid react component, even though they conform to valid react component syntax. Unhandled Runtime Error Erro ...

How do I customize the appearance of console.log messages stored in a string variable?

Looking to enhance the appearance of my console log output in a JavaScript script by utilizing different styling options. Here's a sample scenario: s=`Title 1 \n This is some text that follows the first title`; s=`${s} \n Title 2 \n T ...

Expanding the reach of the navigation bar

Hello Everyone, Is there a way to stretch my navigation bar so that the links are evenly spaced out across the browser window instead of being clustered together? I want it to be responsive rather than fixed in size. This is my HTML code: <div class= ...

What causes Gun.js to generate duplicate messages within a ReactJs environment?

I need assistance with my React application where gun.js is implemented. The issue I am facing is that messages are being duplicated on every render and update. Can someone please review my code and help me figure out what's wrong? Here is the code s ...

Guide to implementing hapi-auth-jwt2 authorization on a specific route within hapi.js?

I am facing an issue with using an access token in hapi.js. I am struggling to comprehend how to utilize this token for authentication purposes. Currently, I am referring to the article on dwyl/hapi-auth-jwt2. My database setup involves mongodb. However, I ...

What is the correct way to securely send the username and password from a ReactJS frontend to the backend for authentication?

My React application includes an onChange function on a form that collects username and password. Upon submission, the username and password are sent to the server side using redux dispatch in Node.js. On the server side, I am authenticating the credentia ...

What could be causing my ajax request to not be successfully compiled?

I seem to be experiencing an issue with this part of my code. Despite trying multiple methods, it still isn't functioning correctly. What steps can I take to resolve this problem? $.ajax({ url: "https://corona-api.com/countries/BR", ...

What are the best practices for implementing optional chaining in object data while using JavaScript?

In my current project, I am extracting singlePost data from Redux and converting it into an array using Object.keys method. The issue arises when the rendering process is ongoing because the singlePost data is received with a delay. As a result, the initi ...

What is the process for refreshing HTML elements that have been generated using information from a CSV document?

My elements are dynamically generated from a live CSV file that updates every 1 minute. I'm aiming to manage these elements in the following way: Remove items no longer present in the CSV file Add new items that have appeared in the CSV file Maintai ...

Beware, search for DomNode!

I attempted to create a select menu using material-ui and React const SelectLevelButton = forwardRef((props, ref) => { const [stateLevel, setStateLevel] = useState({ level: "Easy" }); const [stateMenu, setStateMenu] = useState({ isOpen ...

Encountering the "Cannot set headers after they are sent to the client" error within an Express.js application

In my recent project, I created a middleware to authenticate users and verify if they are verified or not. Initially, when I access protected routes for the first time, everything works fine and I receive success messages along with verification of the JWT ...

The Magic of Javascript Routing with Regex Implementation

I'm currently developing a Javascript Router similar to Backbone, Sammy, and Spin. However, my specific requirements are rather straightforward. I need the ability to define a series of routes along with their corresponding callbacks, and I want to be ...

Accessing the facebox feature within a dropdown menu

Looking for assistance in creating a function to open a facebox when an option from a drop down list is selected. Here is what I have so far: <select><option value="www.google.com/" id="xxx"></option></select> In the header sectio ...

The Vue.js route is not aligning with its defined path, causing a mismatch

Attempting to develop a Vue SPA app, but encountering an issue with the routes not matching what was defined in the router. Despite all configurations seemingly correct, there is confusion as to why this discrepancy exists. What element might be overlooked ...

Help me understand how to display the data in a JSON array

{ "entries": [ { "id": 23931763, "url": "http://www.dailymile.com/entries/23931763", "at": "2013-07-15T21:05:39Z", "message": "I ran 3 miles and walked 2 miles today.", "comments": [], "likes": [], ...

Accentuated JSON Serialization

I am encountering an issue while attempting to retrieve a remote JSON file that contains accents. Removing the accents from the JSON file allows it to work properly, but when the accents are present, I encounter an error. Despite my attempts to utilize " ...

Connecting the mat-progress bar to a specific project ID in a mat-table

In my Job Execution screen, there is a list of Jobs along with their status displayed. I am looking to implement an Indeterminate mat-progress bar that will be visible when a Job is executing, and it should disappear once the job status changes to stop or ...

Unique syntax using markdown-react

I want to customize the syntax highlighting in react-markdown. Specifically, I would like to change the color of text inside {{ }} to blue while still maintaining the correct formatting for other elements, such as ## Header {{ }} import React from " ...