отображать данные из объекта JSON на HTML в угловых 5

Question

привет, я хочу отобразить данные, которые я получил от mongodb, используя API-интерфейс сервера (nodejs) это код для модели события

const mongoose = require('mongoose');
const config = require('../config/database');

// Events Schema
const EventSchema = mongoose.Schema({
  eventname: {
    type: String,
    required: true
  },
  eventstartdate: {
    type: String,
    required: true


  },
  eventenddate: {
    type: String,
    required: true


  },

  eventcategorie: {
    type: String


  },
  eventdescription: {
    type: String


  },
  eventimage: {
    type: String


  }


});
const Event = module.exports = mongoose.model('Event', EventSchema);

это код с роутера

    const express = require('express');
    const router = express.Router();
    const passport = require('passport');
    const jwt = require('jsonwebtoken');
    const config = require ('../config/database');
    const User = require('../models/user');
    const Event = require('../models/event');

    //get event by id
router.get('/event/:eventid', (req,res) => {
  Event.findById(req.params.eventid, (err, event) =>{   
  if (err){
    return res.status(500).send({message:err.message});
  }
  if(!event){
    return res.status(400).send({message:'Event not found'});
  }

  res.json({

    event: {
      id: event._id,
      eventname: event.eventname,
      eventstartdate: event.eventstartdate,
      eventenddate: event.eventenddate,
      eventcategorie: event.eventcategorie,
      eventdescription: event.eventdescription,
      eventimage: event.eventimage

    }

  });
});
});

а это код от службы в угловых

// GET an event by ID
   displayEvent$(id: string) {
    return this.http.get(`http://localhost:3000/users/event/${id}`)
    .map(response => response.json());
  }

тогда я создал простой метод, который вызывается кнопкой и я передал идентификатор события, которое я знаю, в базе данных, просто чтобы проверить его

onclickeventpage(){
    this.authService.displayEvent$('5ae0c8e96b40a71cd3b772cc').subscribe(event => {
      console.log(event)




  });
}

это возвращает меня к консоли событие, которое мне нужно с каждым атрибутом но когда я изменяю это

console.log(event)

к этому, чтобы я мог получить атрибуты каждого отдельно, а затем положить их в HTML

console.log(event.eventname)

я получаю неопределенный

я просто хочу знать, как получить каждый атрибут события, чтобы я мог отобразить их на своей html-странице

Answer 1

HttpModule устарела, и новый HttpClientModule по умолчанию форматирует ответ в JSON, поэтому нам больше не нужно анализировать его, используя response.json():

Я просто хочу знать, как получить каждый атрибут события, чтобы я мог показать их на моей странице HTML

Вы можете указать HttpClient тип ответа, чтобы сделать вывод более простым и очевидным.

Проверка типа ответа может быть выполнена с помощью параметра типа

 export interface Ievent {
  id:string
  eventname: string
  eventstartdate: string
  eventenddate: string
  eventcategorie: string
  eventdescription: string
  eventimage: string

    }

Http возвращает observable, и мы можем указать HttpClient.get, чтобы он возвращал response в качестве типа события. Когда мы используем http.get<Ievent>(...), он возвращает экземпляр типа Observable<Ievent>.
К вашим услугам

     import { HttpClient } from '@angular/common/http';
     import { Observable } from 'rxjs/Observable';
        import {Ievent} from './eventModel'
            @Injectable()
        export class authService()
                {
       constructor(private http:HttpClient){}
       displayEvent$(id: string)Observable<Ievent> {

          return this.http.get<Ievent>(`http://localhost:3000/users/event/${id}`);
           }
          }

В вашем компоненте подпишитесь на Observable<Ievent>, чтобы получить экземпляр Ievent

   onclickeventpage(){
    this.authService.displayEvent$('5ae0c8e96b40a71cd3b772cc').subscribe(event => {
      console.log(event);
      console.log(event.eventname)});
}

Answer 2

Сначала вам не нужно звонить .json () witn angular5

displayEvent$(id: string) {
    return this.http.get(`http://localhost:3000/users/event/${id}`)
    .map(response => response.json());
  }

также вам нужно получить доступ

console.log(event.event.eventname);