Angular 6 Observable和subscribe

Question

I have some data in angular services coming from REST API

info.services.ts

getCustomerDetails() {
   this.http.get(this.localUrl + this.customerUrl + this.options).pipe(map((response: Response) => response.json()))
}

my homepage.ts

getData(){
  this.infoServices.getCustomerDetails().subscribe(data=>{
    if(data) {
      this.name = data[0].customerInfo.name;
    }
  })
}

and my home.html

<input type="text" value="{{this.name}}" formControlName="name" />

my question is there any better way to fetch data instead of doing data[0]?

endpoint:

router.post("/request/customer", (req, res) => {
    var pendingRequest = new Customer({
        name: req.body.name,
        age: req.body.age,
        isNewCustomer: true,
        requestInfo: {
            customerType: req.body.customerType,
            sendTo: {
                email: req.body.sendTo_email,
                company: req.body.sendTo_company
            },
            returnTo: {
                email: req.body.returnTo_email,
                company: req.body.returnTo_company
            }
        },
    });
    pendingRequest
        .save()
        .then(result => {
            console.log(result);
            res.status(200).json({
                message: "Handling POST request to /pending",
                createdRequest: result
            });
        })
        .catch(err => {
            console.log(err);
            res.status(500).json({
                error: err
            });
        });

Answer 1

You can do it in your service it the map function :

   this.http.get(url).pipe(map((response: Response) => response[0])

This way when you subscribe to your observabla the date retrieved will be available directly

You would also want to create an interface that defines the structure of your response so that you can manipulate your objects easily

Answer 2

I have found the solution, so in ts file:

customerData:any = []
    getData(){
    this.customerData = [];
      this.infoServices.getCustomerDetails().subscribe(data=>{
        if(data) {
          this.customerData = data;
        }
      })
    }

and in your html template simply

<div *ngFor="let data of customerData; let i = index">
{{data.name}}
</div>