Obtain the value of a promise in AngularJS without accessing its internal properties

Hey there, I have another question about promises. I'm trying to fetch data from an endpoint and use it in ng-repeat. Here is the standard response from the endpoint:

{"ebbe5704-4ea5-470e-8ab9-102ee8ca457f":"Foo",
 "e380a6f7-2f88-46bb-bd54-251719353627":"Bar"
}

This is how I am handling the promise:

RequestService.getValues().$promise.then(function(res) {
    vm.result = res;
});

Then, I display it in HTML like this:

<p ng-repeat="i in vm.result">{{i}}</p>

The issue I'm facing is that the rendered view includes internal fields of the promise ($promise and $resolved): https://i.sstatic.net/AtIFo.png

Am I missing something here? Is there a better way to avoid showing those internal fields without having to filter through the result keys?

UPDATE: RequestService.getValues is using $resource, so the approach can be replaced with:

$resource("/rest/", null, {
    getValues: {
        url: "/rest/values/",
        method: "GET"
    }
}).getValues().$promise.then(function(res) {
    vm.result = res;
    console.log("RES:", res);
});

Answer №1

The issue lies in the fact that you are using ng-repeat to iterate over an object rather than an array.

AngularJS resources are designed to work with ng-repeat specifically for arrays. When dealing with an object, ng-repeat functions similar to for(var key in obj), while with an array it uses index-based looping like

for(var i=0; i<arr.length; i++)
. This causes it to skip certain properties such as $promise.

To solve this problem, you can create a custom filter that excludes Angular's internal methods from the ng-repeat iteration:

$scope.skipResourceFn = function(key)
{
    return key.indexOf('$') != 0;
};

Then, in your template:

<p ng-repeat="i in vm.result | filter:skipResourceFn">{{i}}</p>

Answer №2

To retrieve the object, one can utilize the $http service in the following manner:

var settings = {
    url: "/api/data/",
    method: "GET"
};

$http(settings).then(function(resp) {
    var info = resp.data;
    view.result = info;
    console.log("Response:", info);
});

It's important to note that the $http service does not add extra properties to an object.

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

Limiting the input of a user to a maximum of a five-digit integer with a maximum of two decimal points using Angular 2 and ngModel

Currently, I am working on an input text field that utilizes [(ngModel)]. My goal is to restrict users to entering only a maximum of 5 digits with up to 2 decimal places. I believe creating a directive is the best approach to achieve this, however, I am un ...

Arrays containing references to Javascript objects

Recently, I've observed some odd behavior with one of my arrays. It seems that the issue lies in how Javascript stores object references within arrays. To illustrate this problem, I'll share a code snippet that I previously posted as an answer on ...

Adjust the overall size of the CSS baseball field

Attempting to adjust the size of the baseball field proved challenging, as it wasn't a simple task. Is there a way to achieve this effectively? Thanks, HTML - is using DIV the only method for resizing? I couldn't find a way to resize everything a ...

Unable to activate menu options within InDesign CC script

I am facing an issue with invoking menu items in scripts. Here is an example: app.menuActions.item("$ID/Override All Master Page Items").invoke; app.menuActions.item("$Override All Master Page Items").invoke; app.menuActions.itemByID(6164).invoke; app.me ...

How to properly display date format in Node.js when using EJS templates with MySQL

When retrieving dates from the database, I am looking to break them down into two separate numbers. 7:00-8:00 //array[0]=7:00 and array[1]=8:00 9:00-9:30 14:30-15:00 Below is my code, but it is returning NaN NaN: <% time_slots.forEach((timeslot ...

JavaScript causing inconsistencies in SVG filter updates across different browsers

Looking for a way to adjust the filter of an svg object using javascript, specifically changing a grey shadow to red upon mouseover. The issue is that in Chrome and Safari, the desired effect does not occur, while Firefox functions as intended. When using ...

Obtain environment variables within a Strapi plugin

I am currently working on developing a Strapi local plugin, but I am facing an issue with retrieving variables defined in my .env file located at the root of my project. Specifically, I am trying to access this value within my React component (plugins/myPl ...

Checking for the existence of a CSS selector in Jasmine test suite

Testing out the latest version of Jasmine and Karma with an AngularJS instance. I attempted: expect(element('a.topic-heading-link-10')).toBeDefined(); However, I received this response: expect undefined toBeDefined undefined http://example.co ...

The useEffect hook in Next.js does not trigger a re-render when the route changes

I'm currently experiencing an issue with a useEffect inside a component that is present in every component. I've implemented some authentication and redirection logic in this component, but I've noticed that when using Next.js links or the b ...

Dealing with Koa-router and handling POST requests

I am facing an issue handling POST requests in my koa-router. Despite using koa-bodyparser, I am unable to receive any data sent through my form. My template engine is Jade. router.js: var jade = require('jade'); var router = require('koa- ...

Toggle the visibility of a hidden div by clicking a button

After spending several days working on this project, just when I thought it was perfect, I had to completely restructure the entire page. Now I'm feeling stuck and in need of some help. The issue is that I have three images with buttons underneath eac ...

When the NPM package is imported as a whole, it shows up as undefined. However, when it

I've come across a peculiar issue in my code where importing the textile/hub package in Node.js and then destructuring it later results in an error. However, if I destructure it while importing, the program runs without any issues. Can anyone shed som ...

Use of ng-if in combination with recursive directives does unexpected behavior

I have a situation where I am using two recursive directives inside ui-bootstrap tabs. In order to optimize performance, I want the directive to only load when its corresponding tab is active. To achieve this, I am using ng-if on the directive like this: & ...

Detecting server errors in Nuxt.js to prevent page rendering crashes: A Vue guide

Unique Context This inquiry pertains to a previous question of mine, which can be found at this link: How to handle apollo client errors crashing page render in Nuxt?. However, I'm isolating the focus of this question solely on Nuxt (excluding apollo ...

Page loading causing sluggishness in Angular application

I've been encountering this problem for quite some time now and have searched extensively online for solutions. However, I believe I may not be using the correct terminology to accurately pinpoint the issue. Within my package.json, I have included th ...

Is it possible to implement a goto-like functionality in Node.js or how can one define and invoke a function inside an asynchronous function?

Utilizing puppeteer, I have set up an automated test to fill out a form and verify captcha. In the event that the captcha is incorrect, the web page refreshes with a new image. However, this requires me to reprocess the new image in order to reach the func ...

Fade in elements individually with the jQuery Waypoints plugin

I am currently using the waypoints jQuery plugin and it is functioning perfectly when fading in on scroll. However, I am facing an issue with making the blocks fade in individually one after the other. Here is the snippet of my jQuery code: $('.hbloc ...

Convert numerical values to currency format

Here is a number 5850 that I would like to format as currency. Format Example 1: 5850 => $58.50 Format Example 2: 9280 => $92.80 I am utilizing the function below: Number.prototype.formatMoney = function(decPlaces, thouSeparator, decSeparat ...

the navigation bar vanishes without any dropdown menu to replace it

I've been working on setting up a responsive navbar that collapses into a drop-down menu when the screen size is reduced below a certain number of pixels. So far, I've been able to hide the regular menu when the size is reduced, but when I click ...

Navigating through and extracting data from an object in JavaScript

Given the function call destroyer([1, 2, 3, 1, 2, 3], 2, 3);, I am trying to retrieve the last 2, 3 part after the initial array. However, I am unsure about how to achieve this. When I use return arr[6]; or return arr[1][0], both statements do not return ...