retrieve data from mongodb to angular

Question

I am trying to get all the data from mongodb but it shows [object] [object] how do I get array data to angular from mongodb? Here is my code:

import { Component, OnInit } from '@angular/core';
import {HttpClient} from "@angular/common/http";

import {Model} from "../model/model";

@Component({
  selector: 'app-take-quiz',
  templateUrl: './take-quiz.component.html',
  styleUrls: ['./take-quiz.component.css']
})
export class TakeQuizComponent implements OnInit {
  data:Model[]=[];

  constructor(private http:HttpClient) { }

  ngOnInit(){
    this.quizAll();
  }

  quizAll(){
    this.http.get<any>('https://localhost:8080/quizzes/').subscribe(response=>
    {
      console.log(response);
      // @ts-ignore
      this.data=response;

     });

  }
}

model.ts

export interface Model {
  title:string;
  description:string;
}

html

<div>
  <p>your data {{data}}</p>
</div>

Here is the screenshot of console

when I try

<div>
      <p>your data {{data.title}}</p>
</div>

It shows following error

deepak thomas · Accepted Answer · 2021-04-29 04:18:10Z

1

Use the JSON Pipe in order to display the whole data as string . Detailed explanation in https://www.concretepage.com/angular-2/angular-2-json-pipe-example and data used in the html is an array not an object. In order to show all title loop through data as given below

<span *ngFor="let val of data">{{val.title}}</span>

edited Apr 29, 2021 at 4:18

answered Apr 29, 2021 at 4:15

deepak thomas

1,1909 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Notation Over a year ago

I went through the documentation but I'm not able to get the exact value it always throws object when I try to get value from html file.

Collectives™ on Stack Overflow

retrieve data from mongodb to angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related