Utilize Angular 5 to create a Data Service for extracting JSON data from MongoDB

Question

Utilize Angular 5 to create a Data Service for extracting JSON data from MongoDB

Seeking to incorporate a data service for reading json data from mongoDB, I initially implemented the function directly within the ngOnInit() of my component successfully. However, when attempting to create a separate data service, I encountered difficulties in getting the json data into my component.

intro-animation.component.ts:

export class IntroAnimationComponent implements OnInit {
  keywords: string[];
  ...
}

constructor(
  private _http: HttpClient) {
  ...
}

ngOnInit() {
  this._http.get('./api/keywords').subscribe(res => {
    this.keywords = res['data'];
  });
}

While the initial implementation works well, I now aim to develop a data service class that can be utilized by other components to access various tables in my database:

data.service.ts

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DataService {
  results: string[];

  constructor(private _http: HttpClient) { }
    getKeywords(): string[] {
      this.getKeywordsObservable().subscribe(res => {
      this.results = res['data'];
    });
    return this.results;
  }

  getKeywordsObservable(): Observable<any> {
    return this._http.get("./api/keywords")
  }
}

I have registered the service in my app.module, but I am uncertain about how to transfer the data from the service to my component.

intro-animation.component.html

<div class="keywords-container" *ngFor="let keyword of keywords">
  <div class="keyword" [ngStyle]="setKeywordFontParams()">
    {{ keyword.name }}
  </div>
</div>

mongoDB json data

{
"status": 200,
"data": [
    {
        "_id": "5a60740d94d06e102e8c2475",
        "name": "Passion"
    },
    {
        "_id": "5a60745be4b93b2c36f6a891",
        "name": "Grandeur"
    },
    {
        "_id": "5a607461e4b93b2c36f6a892",
        "name": "Prestige"
    }
],
"message": null
}

Being relatively new to Angular, any guidance on how to proceed would be greatly appreciated.

json mongodb angular typescript angular5

Answer 1

Answer №1

When your dataService's getKeywords() method calls http.get, it is an async operation. Therefore, if you try to return this.results;, it will still be undefined and return nothing.

A better approach would be to return an observable directly from the data.service.ts file. For example:

 getKeywordsObservable(): Observable<any> {
    return this._http.get("./api/keywords")
  }

Then, subscribe to this observable inside the intro-animation.component. Like this:

ngOnInit() {
      this._dataService.getKeywordsObservable().subscribe(res => {
        this.keywords = res['data'];
      });
    }

Answer 2

When your dataService's getKeywords() method calls http.get, it is an async operation. Therefore, if you try to return this.results;, it will still be undefined and return nothing.

A better approach would be to return an observable directly from the data.service.ts file. For example:

 getKeywordsObservable(): Observable<any> {
    return this._http.get("./api/keywords")
  }

Then, subscribe to this observable inside the intro-animation.component. Like this:

ngOnInit() {
      this._dataService.getKeywordsObservable().subscribe(res => {
        this.keywords = res['data'];
      });
    }

Answer 3

Answer №2

animation-introduction.component.ts:

import {DataService} from "<service location>" 

    export class AnimationIntroductionComponent implements OnInit {
      words: string[];

    constructor(
      private _service: DataService) {
      ...
    }

    ngOnInit() {
      this._service.getWords().subscribe(res => {
        this.words = res;
      });
    }

word.service.ts

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class WordService {

  constructor(private _http: HttpClient) { }


  getWords(): Observable<any> {
    return this._http.get("./api/words")
  }
}

We hope this information is beneficial.

Answer 4

animation-introduction.component.ts:

import {DataService} from "<service location>" 

    export class AnimationIntroductionComponent implements OnInit {
      words: string[];

    constructor(
      private _service: DataService) {
      ...
    }

    ngOnInit() {
      this._service.getWords().subscribe(res => {
        this.words = res;
      });
    }

word.service.ts

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class WordService {

  constructor(private _http: HttpClient) { }


  getWords(): Observable<any> {
    return this._http.get("./api/words")
  }
}

We hope this information is beneficial.

Answer 5

Answer №3

Here's an example of how you can achieve this:

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DataService {

  constructor(private _http: HttpClient) { }

  public fetchKeywords(): any {
    return this._http.get('./api/keywords').map(response => {
      return response['data'];
    });
  }

}

To use this service in your component, simply inject it and call dataService.fetchKeywords()

Answer 6

Here's an example of how you can achieve this:

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DataService {

  constructor(private _http: HttpClient) { }

  public fetchKeywords(): any {
    return this._http.get('./api/keywords').map(response => {
      return response['data'];
    });
  }

}

To use this service in your component, simply inject it and call dataService.fetchKeywords()

Utilize Angular 5 to create a Data Service for extracting JSON data from MongoDB

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting Async Function compatibility between Express and NestJs

Why are the description and summary being combined in Jira API when creating a new issue?

What is the best way to convert an array of JSON objects into a two-dimensional array in Java using GSON?

What is the process for sending an array to a Jenkins parameterized job using the remote access API?

Implement a for loop within the function responsible for creating a collection in Firebase

Neglecting the error message for type assignment in the Typescript compiler

Bringing in TypeScript declarations for the compiled JavaScript librarybundle

In Doctrine Mongo, when a child entity is the owning side, cascading removal can be

Retrieving information from a function beyond the scope of Mongoose

Resizing the elements within an iframe: Troubleshooting problems with embedding Bandcamp players

Ways to personalize the interface following the selection of an item from a dropdown menu

Webpack does not support d3-tip in its current configuration

Angular 6 Modal Window

What are some effective measures to defend against a gzip bomb attack on a service

Storing JSON data in a Postgres database using Elixir and Phoenix

The issue of process.server being undefined in Nuxt.js modules is causing compatibility problems

Module 'next-intl/client' cannot be located

Step-by-step guide on uploading an image file using Nextjs

Console unable to display extensive JSON data

Looking for a way to navigate through nested JSON data within a JSX component in a React Native application