Using $q.all function in a controller to fetch data from a service and receiving an

For a considerable amount of time, I have been facing some challenges with an API call. Even though the console.log in my service is returning the necessary data, the controller seems to receive an empty object. I suspect there might be an issue with how I am handling my promises, but despite thorough inspection, I cannot pinpoint the problem. Currently, I am utilizing $q.all() to concatenate multiple get requests.

Below is the code snippet for my controller function:

$scope.getData = function(input) {
    exampleService.getData(input)
        .then(function(data) {
            console.log(data);
            $scope.savedData = data;
        }, function(error) {
            alert(error); // displays an alert message with -1 upon encountering an error
        });
};

And here is the service function implementation:

this.getData = function(input) {
$q.all([
    $http.get(url1),
    $http.get(url2)
]).then(function(response) {
    console.log(response); // returns an array of objects that are required
    return response;
});
return $q.all();
};

While attempting to return $q.all().promises, an error appeared in the console stating:

cannot read property 'then' of undefined

Ultimately, my goal is to access a specific property within each nested object in the array. For instance:

var returnedPromise = [
     {dataIDontNeed: 1, {dataIwant}},
     {dataIDontNeed: 2, {dataIwant}},
     {dataIDontNeed: 3, {dataIwant}}
]

I am seeking guidance on retrieving the dataIwant object from the array of objects before sending back the promise. Any assistance provided would be greatly appreciated.

Answer №1

Instead of creating another empty copy of $q, simply return the original $q.all promise from the service.

return $q.all([ $http.get(url1), $http.get(url2) ]);

Implement this in the controller:

service.getData({}).then(...

If you need to modify the results, add another promise that resolves immediately to the all function. If the data needs to be formatted differently, remove the unwanted property like so:

return $q.all([ $http.get(url1), $http.get(url2) ]).
then(function(results){
    return results.map(function(each){
        delete each.dataIDontNeed;
        return each;
    });
    });

Handle it similarly in the controller.

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

Retrieve the id for the chosen user name within a function that contains an array of objects

const userList = [ {name:"jonh" ,id:EAD1234}, {name:"peter" ,id:EAD1235}, {name:"matt" ,id:EAD1236}, {name:"henry" ,id:EAD1237}, ] In the array above, there are various users with their respective IDs. The goal is t ...

Typehead.js on Twitter is displaying the full query instead of just the value

The Problem This is the issue I am facing with my code. My goal is to retrieve only the value, but instead of that, the entire query value is being returned. var engine; engine = new Bloodhound({ local: [{value: 'red'}, {value: 'blue&apo ...

The <mat-radio-button> component does not have a value accessor specified

When working with HTML and Angular, I encountered the following issue: <mat-radio-group> <mat-radio-button [(ngModel)]="searchType"> And (Narrower search) </mat-radio-button> <mat-radio-button [(ngModel)]="searchType"&g ...

What is the best way to send data into functions?

I'm trying to avoid using global variables and I'm facing some difficulties in figuring out how to pass the database variable into the addTrain function. Do I necessarily need to use global variables for the database? $(document).ready(function( ...

The ng-repeat function is iterating through the array multiple times

Using ng-repeat to bind the same array multiple times. JavaScript : $scope.currentitem = item; $scope.currentitemCategory = $scope.currentitem.category.split(','); console.log($scope.currentitemCategory); HTML: <div ng-repea ...

Dynamic scrolling text for overflowing text display

Here's a scenario I'm facing: Let's say I have three div tags, each 100 pixels wide: <--- DIV WIDTH ---> Text in div 1 Text in div two, it overflows Text in div three <--- DIV WIDTH ---> Currently, I've set the following C ...

What is the reason behind only seeing empty brackets [] when Array.prototype is displayed in

When looking at String.prototype, Object.prototype, and Boolean.prototype, we see that they all have a similar structure where the object {} is displayed. However, when it comes to Array.prototype, instead of displaying Array [], it outputs []. Why does ...

Is it possible for me to use ts files just like I use js files in the same manner?

So I recently stumbled upon TypeScript and found it intriguing, especially since I enjoy adding annotations in my code. The only downside is that I would have to change all my .js files to .ts files in order to fully utilize TypeScript's capabilities. ...

Having difficulty generating dynamic rows and tree dropdowns in AngularJS

Struggling to implement dynamic row functionality with Angular JS. The rows are working well, but I also need to incorporate a tree dropdown within each row. Unfortunately, clicking the "add row" button populates the same data in all rows. I have shared m ...

tips for efficiently using keyboard to navigate through tabs in an unordered list

Utilizing unordered lists in this web application. I am looking to implement tab navigation with keyboard functionality. How can I achieve this? The first tab should contain text boxes, and when the user fills out a text box and presses the tab key, they s ...

Learn how to dynamically set the "selected" option in Vue based on object data

I've done some digging on SO but haven't found exactly what I need. So, here's the situation - I've got a sorting function in progress. I have an array of date ranges (PayPeriods) that I want to render into a select with option compone ...

Unlock the potential of displaying similar object values side by side in JavaScript, React, and ES6 - here's how!

Currently, I am dealing with an object called segregatedData which is being passed as props. Among its several properties, we are interested in segregatedData.type1. This particular property is essentially an array of strings similar to this: ['water& ...

Is it possible to change XML using Ajax technology?

Is it possible to update a value in an XML file using JavaScript/Ajax? I've managed to access the XML file with Ajax and utilize its values in my script. Now, I want to send any updates made by the script back to the XML file on the server using Ajax ...

Is there a way to prevent my token from being exposed when making an AJAX call?

When working on my HTML file, I encountered an issue with a Python Django URL integration where I need to pass a token to retrieve certain information. However, the problem is that my token is exposed when inspecting the page source in the HTML document. ...

What is the sequence in which Jest executes its tests?

A fascinating challenge I've taken on involves testing a card game created in JavaScript using Jest. Currently, I have developed two tests: one to verify the creation of a 52-card deck and another to confirm that the player is dealt two cards at the ...

Numerous points highlighted on the map

As I develop my application, I am working on setting up an event to automatically load data from a CSV excel file for display. My goal is to extract information from the Excel CSV file and use it to populate locations on a Google Map within my application ...

Utilizing React Material-Table to Trigger a React Component through Table Actions

I have set up a datatable using the code below. <MaterialTable icons={tableIcons} title={title} columns={columns} data={data} actions={[ { icon: () => <Edit />, t ...

Is it possible to establish a scope for jquery.ajaxSetup()?

Currently, I am working on a project involving numerous ajax calls with repetitive parameters. After some consideration, I am contemplating using jquery.ajaxSetup() to streamline the code. However, jQuery does not recommend this approach in their API docu ...

Is it possible to add a jQuery-generated element to pure vanilla JavaScript?

I am facing a challenge in creating a new notification div when an event is triggered. Ideally, I would normally achieve this using jQuery by utilizing something like $("myDiv").append(newDiv). However, in this case, the item selector to which the new div ...

The call is not being answered by the server route (NodeJS + express)

I have encountered an issue while setting up a server using NodeJS and Express. When I attempt to make a get request to the basic route ('http://localhost:3000/'), the request seems to hang indefinitely. Despite thoroughly reviewing my code multi ...