Utilizing an AngularJS service to communicate with a web API

Having trouble retrieving data from a web api and passing it back to a JavaScript file. I've tried using http://localhost:8584/api/Testing/5 to see if there are any results, but no luck so far.

//This is the JavaScript controller that calls the service.js
app.controller('mainController', function ($scope, service) {
    
    returnData();
    function returnData() {
        var getData = service.get(5);

        //The data returned from the web api will be displayed with $scope.newmessage
        getData.then(function (pl) { $scope.newmessage = pl.data },
              function (errorPl) {
                  $log.error('failure loading Employee', errorPl);
              });
    }
}
            
//this is service.js
app.service('service', function ($http) {
    
    var baseUrl = 'http://localhost:8584/';
    this.get = function (Id) {
        return $http.get(baseUrl + 'api/Testing/' + Id);
    }
});


//This is my web API controller
namespace angulartestOne.Controllers
{
    public class TestingController : ApiController
    {
        // GET api/<controller>
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/<controller>/5
        public string Get(int id)
        {
            return "value";
        }

        // POST api/<controller>
        public void Post([FromBody]string value)
        {
        }

        // PUT api/<controller>/5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/<controller>/5
        public void Delete(int id)
        {
        }
    }
}

Answer №1

To ensure the data is returned only when it's ready, a callback function from the service's get method should be implemented. Keep in mind that this process is asynchronous and data can only be retrieved when it becomes available.

Modify your service code as shown below:

app.service('service', function ($http) {
  var baseUrl = 'http://localhost:8584/';
  this.get = function (Id, callback) {
     $http.get(baseUrl + 'api/Testing/' + Id)
      .then(function (response) {
           callback(response.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

Error: EPERM -4048 - the system is unable to perform the operation specified

Every time I attempt to install a package using npm install, I encounter an error message (usually referring to a different path). I have attempted running npm cache clean, restarting my computer, and checking for any processes that may be interfering with ...

Both the client and server sides are in sync with the latest data, yet the rendering fails to display the recent updates

The technologies I am currently utilizing include Nodejs, Express, MySQL, and EJS. My current task involves: Creating an app.get function that retrieves necessary data (posts) from MySQL, then renders a file using that data app.get("/" + element.name, f ...

Issue with resetting the state of a react-select component remains unresolved

I'm currently facing two issues with my react-select component: Firstly, once I select an option, I am unable to change it afterwards. Second, when my form is reset, the react-select component does not reset along with the other fields. For simplici ...

Managing JavaScript with Scrapy

Spider for reference: import scrapy from scrapy.spiders import Spider from scrapy.selector import Selector from script.items import ScriptItem class RunSpider(scrapy.Spider): name = "run" allowed_domains = ["stopitrightnow.com"] start_urls = ...

drawImage - Maintain scale while resizing

I am currently working on resizing an image using drawImage while maintaining the scale. Here is what I have so far... window.onload = function() { var c = document.getElementById("myCanvas"); var ctx = c.getContext(" ...

Storing the translated value from angular translate into a global variable: a guideline

I've been grappling with this issue for quite some time now without much success. My goal: I'm attempting to store the value of an angular translation (using $translate) in a global variable so that I can later use it for assigning dynamic varia ...

Exploring ways to validate the existence of a class in HTML table elements

If I want to verify if each element has a specific class when creating tables and clicking on the corresponding cells above them, This is what I have tried. However, it did not work as expected. How can I make this work correctly? What am I missing her ...

Automatically adjust height directive to fill up the remaining space

Is there a way to dynamically adjust the height of an element to fill the remaining space within its container? In my current layout, I have a fixed-height header (or menu) in pixels, a content area that may overflow the window height and require scroll b ...

Perpetual duplication of data occurs upon inserting an item into the Array state of a React component

Whenever a new item is added to the React JS Array state, data duplication occurs. console.log(newData) The above code outputs a single object, but when you print the actual data with console.log(data) You will notice continuous duplicates of the same da ...

Sending properties through the React Router to a specific component

Within my component, I have a material table that triggers a function when the edit button is clicked: //MaterialTable.js ... const handleEdit = (e, Data) => { console.log(Data) return(<EditFunction id={Data.id} />) ... The purpose of ...

Determining Adjacency of <li> Elements Using jQuery Sortable() and Class Comparison

I have created a custom display builder specifically for outdoor power equipment dealers. This tool allows them to easily add, remove, and rearrange different product display sections according to their preferences. To achieve this functionality, I utilize ...

Is it necessary to reload the page each time to see updates on the navbar in nextjs?

I recently developed a Next.js application with a Navbar component integrated into my layout.tsx file. The challenge arises when a user logs in and is redirected to the home page, which showcases a link in the Navbar for viewing their profile. However, I n ...

"Compilation error: 'not defined' is not recognized, 'no-undef

I am currently working on a login form that will fetch values from this API: However, the password field is currently empty, allowing any password to be accepted. This results in the error: Failed to compile 'userName' is not defined no-undef; ...

Tips for filtering data using an array within an object containing arrays

Below is the provided information: userRoom = ['rm1']; data = [{ name: 'building 1', building: [{ room: 'rm1', name: 'Room 1' },{ room: 'rm2', name: ' ...

Using Node.js with Express to seamlessly pass objects to EJS templates

I have a scenario where I am passing an object to my template and I want to display the details of that object in HTML. app.get('/', function (req, res) { var user = req.session.passport.user; if ( user != 'undefined' ){ ...

The Iron Seal feature is ineffective when a user tries to log in

Iron.seal isn't properly updating the npm module Iron, which is causing login issues for users. var obj = { a: 1, b: 2, c: [3, 4, 5], d: { e: 'f' } }; var password = 'some_not_random_password_that_is_at_lea ...

Error encountered when attempting to add document to Firebase database: admin:1. An unexpected FirebaseError occurred, stating that the expected type was 'Na', but it was actually a custom object

I am encountering an error when trying to add a document to my collection in Firebase. I have successfully uploaded an image to Storage and obtained the URL, but this specific step is causing issues. I have followed the code implementation similar to how F ...

Questions about setting up a local development environment for Angular.js

After completing a few tutorials on Angular.js, I was eager to start building projects from scratch locally. However, despite my efforts, I have not been able to successfully set up my local development environment. I tried copying the package.json from A ...

`How can I effectively integrate react-i18next with the Semantic UI label element?`

Currently, I am working with Semantic UI along with the integration of [react-i18next][2]. My goal is to enable translation for label strings, but these labels include HTML tags, such as span. Unfortunately, the system only allows hardcoded or variable s ...

Javascript puzzle - I have 99 obstacles

...but a malfunction isn't one. Hey there, I am new to learning so I apologize for the seemingly simple question. I'm experimenting with a theoretical logic statement that would work using javascript. For instance: if (issues == 99) { malfunct ...