Difficulty retrieving information using AngularJS service post selection of item

Question

Difficulty retrieving information using AngularJS service post selection of item

Currently, I am working on a project involving an AngularJS application. While using the service testPanelService, I encountered a problem where selecting an item from a list correctly logs the details of the selected item. However, when attempting to fetch related information using the service panelInvestigationService, the expected data is not received.

The following is part of the service file:


// Interfaces and classes defined here...

Below is a snippet from my TypeScript controller relevant to this issue:


// Controller code provided here...

Here is the corresponding HTML:


// HTML template included here...

Upon selecting an item, the console outputs the following response from testPanelService: Selected item: {code: '02', name: 'Pregnancy', retired: false, ...} However, when making a call to panelInvestigationService.query(testPanelId), I expect to receive an array of investigation details as demonstrated below:


// Expected output structure shown here...

Despite this, I do not see the anticipated result in the console after executing panelInvestigationService.query(). The selection log works properly, but the subsequent data retrieval does not function as intended.

Some attempts I have made include:

Ensuring that testPanelId is correctly passed to panelInvestigationService.query().
Inspecting the network request through the browser's developer tools, which confirms the correct testPanelId being used for the request.
Adding console logs to validate the response structure from panelInvestigationService.query().

I am uncertain why panelInvestigationService.query() is failing to return the expected data. Is there a possibility that there is an issue with how I am managing the promise or updating the dataSet? Any insights or recommendations on this matter would be highly valued.

javascript angularjs typescript http service

Answer 1

Answer №1

After identifying the issue within the service, I made adjustments to ensure it functions properly:


export interface ITestPanelInvestigationService
  extends IAggregateRootService<ILaboratoryTest, string> {
  queryByInvestigationSetId(
    investigationSetId?: string, //this corresponds to the itestpanel code
    page?: IPageRequest
  ): ng.IPromise<IPageReponse<ILaboratoryTest>>;
}

interface ITestPanelInvestigationResource
  extends IResourceService<ILaboratoryTest> {
  fetch: ng.resource.IResourceMethod<IPageReponse<ILaboratoryTest>>;
  queryByInvestigationSetId: ng.resource.IResourceMethod<IPageReponse<ILaboratoryTest>>;
}

export class TestPanelInvestigationService
  extends EntityService<ILaboratoryTest, string, ITestPanelInvestigationResource>
  implements ITestPanelInvestigationService
{
  static $inject = ['TestPanelInvestigationResource'];
  constructor(private resource: ITestPanelInvestigationResource) {
    super(resource);
  }
//Renamed the query method for clarity
  queryByInvestigationSetId(investigationSetId?: string, page?: IPageRequest): ng.IPromise<IPageReponse<ILaboratoryTest>> {
    // Set default page request if not provided
    if (angular.isUndefined(page)) {
      page = { page: 0, size: 32000 };
    }
    return this.getResource().queryByInvestigationSetId({
      investigationSetId: investigationSetId,
      page: page.page,
      size: page.size,
      sort: page.sort,
    }).$promise.catch(error => {
      console.error('Error querying investigation set ID:', error);
      throw error; // Log error or handle appropriately
    });
  };
//Applied the code logic here
  ITestPanel = (code: string): ng.IPromise<any> => {
    return this.getResource().fetch({ id: code})
      .$promise;
  };
}

export class TestPanelInvestigationResourceService {
  private apiRoot: string = Settings.serverResource('api/get-individual-investigations-by-set/');
  constructor(private $http) {}
  
//Implemented the respective method with correct syntax for 'ID'
  queryByInvestigationSetId = (investigationSetId: string) => {
    this.$http.get(
      Settings.serverResource(`api/get-individual-investigations-by-set/${investigationSetId}`)
    );
  };
  fetch = (id: string) => this.$http.get(`${this.apiRoot}${id}`);

  get = (id: string) =>
    this.$http.get(`${this.apiRoot}${id}`).success(function (data) {
      if (data) {
        data = angular.fromJson(data);
      }
      return data;
    });

  update = (id: string) => this.$http.put(`${this.apiRoot}${id}`);
}

TestPanelInvestigationResource.$inject = ['$resource'];

export function TestPanelInvestigationResource(
  $resource: ng.resource.IResourceService
): ITestPanelInvestigationResource {
  const resourceUrl = Settings.serverResource(
    'api/get-all-test-panels/:investigationSetId'
  );

  return <ITestPanelInvestigationResource>$resource(
    resourceUrl,
    {},
    {
      query: { method: 'GET', isArray: false },
      fetch: { method: 'GET', isArray: false },
      queryByInvestigationSetId: {
        method:'GET',
        url: Settings.serverResource('api/get-all-test-panels/:investigationSetId',),
        isArray: false,
      },
      get: {
        method: 'GET',
        transformResponse: function (data) {
          if (data) {
            data = angular.fromJson(data);
          }
          return data;
        },
      },
      update: { method: 'PUT' },
    }
  );
}

Answer 2

After identifying the issue within the service, I made adjustments to ensure it functions properly:


export interface ITestPanelInvestigationService
  extends IAggregateRootService<ILaboratoryTest, string> {
  queryByInvestigationSetId(
    investigationSetId?: string, //this corresponds to the itestpanel code
    page?: IPageRequest
  ): ng.IPromise<IPageReponse<ILaboratoryTest>>;
}

interface ITestPanelInvestigationResource
  extends IResourceService<ILaboratoryTest> {
  fetch: ng.resource.IResourceMethod<IPageReponse<ILaboratoryTest>>;
  queryByInvestigationSetId: ng.resource.IResourceMethod<IPageReponse<ILaboratoryTest>>;
}

export class TestPanelInvestigationService
  extends EntityService<ILaboratoryTest, string, ITestPanelInvestigationResource>
  implements ITestPanelInvestigationService
{
  static $inject = ['TestPanelInvestigationResource'];
  constructor(private resource: ITestPanelInvestigationResource) {
    super(resource);
  }
//Renamed the query method for clarity
  queryByInvestigationSetId(investigationSetId?: string, page?: IPageRequest): ng.IPromise<IPageReponse<ILaboratoryTest>> {
    // Set default page request if not provided
    if (angular.isUndefined(page)) {
      page = { page: 0, size: 32000 };
    }
    return this.getResource().queryByInvestigationSetId({
      investigationSetId: investigationSetId,
      page: page.page,
      size: page.size,
      sort: page.sort,
    }).$promise.catch(error => {
      console.error('Error querying investigation set ID:', error);
      throw error; // Log error or handle appropriately
    });
  };
//Applied the code logic here
  ITestPanel = (code: string): ng.IPromise<any> => {
    return this.getResource().fetch({ id: code})
      .$promise;
  };
}

export class TestPanelInvestigationResourceService {
  private apiRoot: string = Settings.serverResource('api/get-individual-investigations-by-set/');
  constructor(private $http) {}
  
//Implemented the respective method with correct syntax for 'ID'
  queryByInvestigationSetId = (investigationSetId: string) => {
    this.$http.get(
      Settings.serverResource(`api/get-individual-investigations-by-set/${investigationSetId}`)
    );
  };
  fetch = (id: string) => this.$http.get(`${this.apiRoot}${id}`);

  get = (id: string) =>
    this.$http.get(`${this.apiRoot}${id}`).success(function (data) {
      if (data) {
        data = angular.fromJson(data);
      }
      return data;
    });

  update = (id: string) => this.$http.put(`${this.apiRoot}${id}`);
}

TestPanelInvestigationResource.$inject = ['$resource'];

export function TestPanelInvestigationResource(
  $resource: ng.resource.IResourceService
): ITestPanelInvestigationResource {
  const resourceUrl = Settings.serverResource(
    'api/get-all-test-panels/:investigationSetId'
  );

  return <ITestPanelInvestigationResource>$resource(
    resourceUrl,
    {},
    {
      query: { method: 'GET', isArray: false },
      fetch: { method: 'GET', isArray: false },
      queryByInvestigationSetId: {
        method:'GET',
        url: Settings.serverResource('api/get-all-test-panels/:investigationSetId',),
        isArray: false,
      },
      get: {
        method: 'GET',
        transformResponse: function (data) {
          if (data) {
            data = angular.fromJson(data);
          }
          return data;
        },
      },
      update: { method: 'PUT' },
    }
  );
}

Difficulty retrieving information using AngularJS service post selection of item

Answer №1

Similar questions

What is causing the lack of data binding between AngularJS and my array?

Designing a query feature to explore a Sequel Database utilizing a 'RETRIEVE' approach

Guide to connecting to various controllers in Angular

What is the process for adding new data to a data source without overwriting existing information?

Issue encountered in Babel version 6 with the transform-es2015-classes plugin in loose mode, causing a SyntaxError when using async/await

Changing the link color within a repeater in ASP .NET when it is clicked

What is the best way to limit angular-xeditable to accept only positive numbers?

Header Overflow Error Encountered in Node.js GET Request

The initial click event for the input element in Jquery is not functioning correctly

Equivalent of $evalAsync in KnockoutJS

Prevent unauthorized entry to css and javascript files

Learn how to automatically access keys in local storage using Angular

The attempt to save data failed with a timed out error for Operation `todos.insertOne()` after 10000ms of buffering

Ways to prevent adding duplicate elements to a state array in React.js?

Examining for a TypeError with Typescript and Jasmine

Persisting Undefined Values Even After Proper Prop Passing

Exploring the capabilities of combining Typescript with withStyles in the latest @material-ui/core framework

Vue textarea not accepting null values

Troubleshooting Vue 3: Dealing with Synchronization Issues Between Keyboard Input and

real-time visual data updates using ng2-charts animation