Стек MEAN: невозможно отобразить данные из одного элемента Mongodb по его идентификатору - PullRequest
Новая
       11

Стек MEAN: невозможно отобразить данные из одного элемента Mongodb по его идентификатору

0 голосов
/ 21 мая 2018

, используя сервис и API для подключения, я смог отобразить весь массив из моей коллекции mongodb в файле catalog.component.ts: api.js 

const express = require('express');
const router=express.Router();

const app=express();
const MongoClient=require('mongodb').MongoClient;
const ObjectID=require('mongodb').ObjectID;
var path=require('path');
var db;

const connection=(closure) => {
    return MongoClient.connect('mongodb://localhost:27017', (err, client)=>{
        if (err) return console.log(err);
        db=client.db('angulardb');
        closure(db);

    });
};


const sendError =(err, res)=>{
    response.status=501;
    response.message=typeof err == 'object' ? err.message : err;
    res.status(501).json(response);
};

let response={
    status:200,
    data:[],
    message: null
};

router.post('/getProducts',(req, res) => {

  connection((db) => {
    db.collection('products')
      .find()
      .toArray()
      .catch((err)=>{
        sendError(err, res);
        response.message ={ success:"Se obtuvieron los registros correctamente", error:""};
        res.send({response});
      })
      .then((result)=>{

        response.data= result;
        res.send({response});
      });
  });
});

router.post('/getProduct',(req, res) => {
  connection((db) => {
    db.collection('products')
      .find({id:new ObjectID(req.query.id)})
      .toArray()
      .catch((err)=>{
        sendError(err, res);
        response.message ={ success:"Se obtuvieron los registros correctamente", error:""};
        res.send({response});
      })
      .then((result)=>{

        response.data= result;
        res.send({response});
      });
  });
});
module.exports=router;

, где я добавил функцию getProducts длякаталог и функция getProduct для деталей 

mongo2.service.ts:

import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';
import {HttpClient, HttpHeaders} from '@angular/common/http';
@Injectable()
export class Mongo2Service {

  constructor( private _http: HttpClient) { }


  getProducts() {
    const headers = new HttpHeaders({'Content-Type': 'application/json' });
    return this._http.post('/api/getProducts', { headers })
      .catch( (error: any) => Observable.throw(error || 'server error'));
  }

  getProduct(id: number) {
    const headers = new HttpHeaders({'Content-Type': 'application/json' });
    const params = {'id': id};
    return this._http.post('/api/getProduct', { headers, params})
      .catch( (error: any) => Observable.throw(error || 'server error'));
  }
}

Здесь я получаю массив из коллекции mongodb catalog.component.ts: 

import { Component, OnInit } from '@angular/core';
import {Mongo2Service} from '../mongo2.service';

@Component({
  selector: 'app-catalog',
  templateUrl: './catalog.component.html',
  styleUrls: ['./catalog.component.css']
})
export class CatalogComponent implements OnInit {
products: any;
respuesta: any;


  constructor( private mongo2Service: Mongo2Service) {}

  ngOnInit() {
  this.getProducts();

  }

  getProducts() {

    this.mongo2Service.getProducts().subscribe(respuesta => {
      this.respuesta = respuesta;
      this.products = this.respuesta.response.data;
      console.log(this.respuesta);
    });
  }
}

И мне выводится коллекция mongodb collection в этом списке: список

Я добавляю ссылку на маршрутизатор к этому списку в компоненте каталога с идентификатором выбранного элемента к другому компоненту под названием «детали», который имеет метод «getProduct» вAPI и сервис, но представление не отображает имя или идентификатор элемента: 

import { Component, OnInit } from '@angular/core';
import {Location} from '@angular/common';
import {ActivatedRoute} from '@angular/router';
import {Mongo2Service} from '../mongo2.service';
@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.css']
})
export class DetailsComponent implements OnInit {

  respuesta: any;
  products:any;

    constructor(private location: Location,
    private route: ActivatedRoute,
   ,private mongo2Service: Mongo2Service) { }

  ngOnInit() {
  this.getProduct();
  }


  getProduct() {
    const id=+ this.route.snapshot.paramMap.get('_id');
    console.log('entro funcion componente');

    this.mongo2Service.getProduct(id).subscribe(respuesta => {
      this.respuesta = respuesta;
      this.products = this.respuesta.response.data; 
      console.log(this.respuesta);
    });
  }

  goBack(): void{
  this.location.back();
  }
}

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Я решил, я отредактировал метод getProduct в api.js, изменив req.query._id на req.body.id внутри find. () Как вы можете видеть: 

router.post('/getProduct',(req, res) => {
  var find={ id: new ObjectID(req.body.id) };
  console.log(find);
  connection((db) => {
    db.collection('products')
      .find({_id:new ObjectID(req.body.id)})
      .toArray()
      .catch((err)=>{
        sendError(err, res);
        response.message ={ success:"Se obtuvieron los registros correctamente", error:""};
        res.send({response});
      })
      .then((result)=>{
        response.data= result;
        res.send({response});
      });
  });
});

Я также удалил '+'в const id и добавил в метод еще одну переменную (product: any) с позицией [0] в данных. 

 getProduct() {

    const id = this.route.snapshot.paramMap.get('_id');

    console.log(id);
    this.mongo2Service.getProduct(id).subscribe(respuesta => {
      this.respuesta = respuesta;
      this.product = this.respuesta.response.data[0];
      console.log(this.respuesta);
    });
  }
0 голосов
/ 21 мая 2018

MongoDB создает _id , а не id , ваше условие соответствия неверно для получения результатов.

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

    router.post('/getProduct',(req, res) => {
      connection((db) => {
        db.collection('products')
          .find({_id:new ObjectID(req.query.id)})
          .toArray()
          .catch((err)=>{
            sendError(err, res);
            response.message ={ success:"Se obtuvieron los registros correctamente", error:""};
            res.send({response});
          })
          .then((result)=>{

            console.log("Expected Results: ", result);

            response.data= result;
            res.send({response});
          });
      });
    });

Это должно получить подробную информацию об одном продукте.Проверьте, как вы используете возвращенные данные здесь.

...