मैं एक ऐसा पेज बनाने की कोशिश कर रहा हूं जहां ग्राहक अपने सभी अतिरिक्त उत्पादों को देख सके। उन्हें डेटाबेस से प्राप्त करने के लिए, मैंने एक पोस्ट रूट लिखा है जहां मैं उपयोगकर्ता नाम से डेटा का चयन कर रहा हूं। मैंने उन्नत आरईएसटी क्लाइंट के साथ इस अनुरोध का परीक्षण किया है और यह काम करता है।

मार्ग.जेएस

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

const username = req.body.username;

Product.getProductByUsername(username, (err, products) => {
    if (err){
        res.json({
            success: false,
            message: "Something went wrong!"
        });
        console.log(err);
    }
    else {
        res.json({
            success: true,
            message: "List of products retrieved!",
            products
        });
    }
});
});

उन्नत REST क्लाइंट प्रतिक्रिया

{
"success": true,
"message": "List of products retrieved!",
"products": [
  {
"_id": "5adbac5e9eb619106ff65a39",
"name": "Car",
"price": 200,
"quantity": 1,
"username": "testUser",
"__v": 0
},
  {
"_id": "5adc43049eb619106ff65a3a",
"name": "Lipstick",
"price": 2.3,
"quantity": 1,
"username": "testUser",
"__v": 0
},
  {
"_id": "5adcf21c18fe1e13bc3b453d",
"name": "SuperCar",
"price": 2000,
"quantity": 1,
"username": "testUser",
"__v": 0
}
],
}

उसके बाद मैंने इस डेटा को फ़्रंटएंड में पास करने के लिए एक सेवा लिखी है।
product.service.ts

import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ProductService {

  username: any;

  constructor(private http: Http) { }

  getProducts(username):any{
    console.log(username);
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.post('http://localhost:3000/products/myProducts', username, {headers: headers})
      .map(res => res.json());
  }
}

और POST अनुरोध से डेटा प्राप्त करने के लिए मेरे घटक में इस सेवा का उपयोग करने का प्रयास किया। myproducts.component.ts

import { Component, OnInit } from '@angular/core';
import {ProductService} from '../../services/product.service'

@Component({
  selector: 'app-myproducts',
  templateUrl: './myproducts.component.html',
  styleUrls: ['./myproducts.component.css']
})
export class MyproductsComponent implements OnInit {

  userString: any;
  user:any;
  username: String;

  products: Object;

  constructor(private productService: ProductService) { }

  ngOnInit() {
    this.userString = localStorage.getItem('user');
    this.user = JSON.parse(this.userString);
    this.username =  this.user.username;
    console.log(this.username);

    this.productService.getProducts(this.username).subscribe(myProducts => {
      this.products = myProducts.products;
    },
    err => {
      console.log(err);
      return false;
    });
  }
}

मुझे विश्वास है कि मैंने यहां कुछ गलत किया है। क्योंकि मुझे 404 बीएडी अनुरोध मिलता है और फिर त्रुटि पार्स करता है क्योंकि अनुरोध जेसन में प्रतिक्रिया की अपेक्षा करता है लेकिन खराब अनुरोध के कारण इसे एचटीएमएल में प्राप्त करता है। क्या आप मुझे यह पता लगाने में मदद कर सकते हैं कि मैं क्या गलत कर रहा हूं? मैं काफी स्व-शिक्षित हूं और यह सब समझना मेरे लिए थोड़ा जटिल है, फिर भी। धन्यवाद!

3
Martin 23 अप्रैल 2018, 10:57

1 उत्तर

सबसे बढ़िया उत्तर

आपकी समस्या यह है कि आप अपना उपयोगकर्ता नाम कैसे भेज रहे हैं। यह एक स्ट्रिंग है जबकि सर्वर पर req.body एक वस्तु है जो username नाम की एक कुंजी की तलाश में है जो उसे नहीं मिलती है।

तो, आप इसके बजाय एक वस्तु भेज सकते हैं:

return this.http.post('http://localhost:3000/products/myProducts', {username : username},
                      {headers: headers}).map(res => res.json());//^^^^ HERE ^^^^^^^^^^
1
Jai 23 अप्रैल 2018, 11:18