Using AngularJS: Retrieving data from a Factory and dynamically updating the Controller's scope and view

Hey everyone, I could really use some advice regarding an issue I'm facing with my factory and controller.

  1. Currently, I have a factory that retrieves data from the server:

    sp.factory('homeFeed',['$window','$http','auth',function($window,$http,auth){
var url = auth.url;
var version = auth.version;
var HomeFeed = {};

HomeFeed.getFeeds = function(user){
    //setting up variables for GET request on home feed
    var req = {
        method: 'GET',
        url: url + version + '/Feed',
        headers: {
            'Content-Type': 'application/json; charset=utf-8',
            'Authorization': 'Bearer ' + token
        },
    }

    return $http(req).success(function(res){
        return res;
    });
};

return HomeFeed;
}]);

  2. Here's my controller:

    sp.controller('HomeCtrl',['$scope','homeFeed','$window',function($scope,homeFeed,$window){
//retrieving all the home feed data
$scope.feeds = homeFeed.getFeeds(JSON.parse($window.localStorage['SP-User']))


}]);

However, once I get the response from the server, my view doesn't update and the $scope.feeds remain unchanged. Any help would be greatly appreciated!

javascriptangularjsangularjs-serviceangularjs-controllerangular-promise

Answer №1

When making an asynchronous $http call, the data will not be immediately available. It will only be accessible once the ajax call has successfully completed. To handle this, you should utilize the .then function to create a promise chain that will execute a function when the .success function returns the data.

Controller

sp.controller('HomeCtrl',['$scope','homeFeed','$window',
   function($scope,homeFeed,$window){
     //fetching all home feed data
     homeFeed.getFeeds(JSON.parse($window.localStorage['SP-User']))
     .then(function(data){
        $scope.feeds = data 
     });
   }
]);

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

Clipboard.js is failing to copy the content

I tried following this: https://jsfiddle.net/gevorgha/fbeof421/ Here is the code in my html file: <!DOCTYPE html> <html lang="en"> <head> [...] <script type="text/javascript" src="{{ url_for('static&apo ...

javascriptflask

The network activity displays the Header() redirect, but the actual redirection is not taking place

I have been working on a process that involves checking for a specific cookie when a user lands on the home page. If the cookie is not found, the user gets redirected to login.php. To authenticate the user, I make a POST request to a third-party API using ...

javascriptphpajax

Exploring and listing the key-value pairs from several arrays within an object

My inquiry pertains to the following function: function loadConfigurations(configs){ console.log(configs); } The 'configs' object received by the loadConfigurations function contains two properties --two arrays named "assigned" and "unassign ...

javascriptjqueryarraysjavascript-objects

What is the best way to access a webpage that has been received through an ajax request

My ajaxcall is giving me back an html page in the response. I'm trying to figure out how to open this in a new window. Any ideas on how to make it happen? https://i.sstatic.net/xguL5.png The console.log(data) command seems to output all the html con ...

javascripthtmlajaxiframeembed

A guide to successfully transferring textarea content to the clipboard in an Angular application

I'm struggling with a task in an Angular 7 application where I have a textarea and need to copy its content to the clipboard when a button is clicked. I've implemented the following code in the button's click handler: if (this.txtConfigFile ...

javascriptangular

When replicating a row in a table using JavaScript, I require the identification and title of the inner element

After clicking on areasensornewline_button, a new row is generated and added to the table. I am able to modify the row ID, however, all new dropdown boxes in this row are now labeled as id="selectedArea0", id="selectedSensor0", name="AreaBinding0", and n ...

javascripthtml

Can Vuex getters be utilized in a Vue component's computed property?

I have various variables in my vuex-store, such as loggedIn. I need to access this variable from the computed section of my component to filter an array based on its value. Here is how I am trying to implement it in my code: <td v-for="(item, index) i ...

javascriptvue.jsvuejs2vue-componentvuex

Issue with passing JSON data to a PHP file using CURL

I am currently working on a project that involves sending exam data with the exam-name and the selected number of questions from a list. Here is the project architecture I am following: To send JSON via AJAX to my make_exam.php file The questions.php fil ...

javascriptphpajaxcurl

bing translator API: the variable text is translated with no content

I'm encountering an issue while working with javascript and PHP. The PHP code seems to run fine until it reaches the $curlResponse variable. From there onwards, all the subsequent variables ($xmlObj, $translatedStr, $translatedText) appear to be empty ...

javascriptphplanguage-translationbing-translator-api

Troubleshooting Cross-Origin Resource Sharing problem with Stripe API integration in Angular

I am diving into the world of Stripe API and CORS for the first time. I've set up a POST request from Angular to my Node.js server. Since the client origin differs from the server destination, I have implemented CORS on the server side. When inspectin ...

javascriptangularjsnode.jscorsstripe-payments

Tips for implementing an angular filter on an array

I am attempting to utilize an Angular filter on the array below based on the guidelines provided here http://docs.angularjs.org/api/ng.filter:filter: [{"id":"compute-1.amazonaws.com_Delivery","id":"compute-1.amazonaws.com_TaskJob","id":"UpdateFiles","id": ...

angularjs

Locate the initial occurrence of a duplicated element within an array

I need to check for duplicate values in an array element. Within my array, I have multiple objects like {S:1,R:2,V:3}. My goal is to display an alert message if there are duplicate values for the "S" element in that array. My Approach: var arr=[{S:1,R:2 ...

javascriptarraysangularjstypescriptecmascript-6

React application created with create-react-app that uses multiple environment files for varying configurations

I've been working on setting up various environment files for a React project (using create-react-app). I referred to the official documentation, but I encountered the following error: '.env.development' is not recognized as an internal or ...

javascriptnode.jsreactjsnpmcreate-react-app

What is the most efficient way to refresh a geometry's topology in ThreeJS?

Is there a way to efficiently update the vertices and faces of my geometry without creating new typed arrays and generating garbage for the JavaScript Garbage Collector? I currently use BufferedGeometry to create my geometry, but when updating vertex coord ...

javascriptthree.jstyped-arrays

Converting .jsx files to .js files in reactJS: A step-by-step guide

Currently, I am utilizing node.js and react as the frontend. How can I successfully import the app.jsx file into the index.js file? import App from "./components/app"; ReactDOM.render(<App text="Hello world"/> , document.getEleme ...

javascripthtmlnode.jsreactjsexpress

Navigate to a specific section on a different page while excluding a distance of X

I've implemented the script below to execute the action mentioned in the title. <script type="text/javascript"> var jump=function(e) { if (e){ e.preventDefault(); var target = $(this).a ...

javascriptanimationscroll

Unsolved PHP variable issue

I recently delved into a tutorial on developing a file upload feature, but encountered an issue with the "unresolved variable total_line" in the index.php file, despite having declared total_line in another PHP file. The error occurs when trying to access ...

javascriptphphtml

Troubleshooting problems with AJAX in WordPress

I have been attempting to transfer an array from PHP to JavaScript in order to display search results from a database. After converting the array into JSON format, I am facing difficulties in retrieving it. Despite having colleagues experienced in AJAX, we ...

javascriptphpjsonajaxwordpress

Is there a way to create dynamic documents in Firestore using Angular?

How can I use a dynamic ID to fetch the values of a document in Firestore? For example, if I have documents named document1 and document2 under the same collection, how can I specify a dynamic path with a dynamic document name to retrieve the specific do ...

javascriptangularfirebasegoogle-cloud-firestore

Node.js and Express make it easy to provide XLS download functionality

I have successfully utilized the code snippet below to generate an excel file in node.js. My intention is for this generated file to be downloadable automatically when a user clicks on a designated download button. var fs = require('fs'); var w ...

javascriptnode.jsexcelexpress