Angular 4 view not updated after fetching data from api

Question

For first, I know this question has a lot of responses yet but I tried a lot of them and nothing is working.

I fetch data from an api endpoint with a service, data is retrieved but view is not updated after that.

Can anyone help me please, thanks.

details.component.html:

<div class="col-sm-3">
    <div class="well padding-10">
      <h5 class="margin-top-0"><i class="fa fa-shopping-cart"></i> Commande n° {{order?.number}}</h5>
      <ul class="no-padding list-unstyled">
        <li>
          <i class="fa fa-building"></i> <strong>{{order?.site}}</strong>
        </li>
        <li>
          <i class="fa fa-calendar"></i> DATE: {{order?.date}}
        </li>
        <li>
          <i class="fa fa-pencil"></i> RESUME TRAVAUX: {{order?.label}}
        </li>
        <li>
          <i class="fa fa-file-pdf-o"></i> DEVIS: {{order?.quote}}
        </li>
      </ul>
    </div>
  </div>

details.component.ts:

import { Component, OnInit, NgZone } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {OrdersService} from "./orders.service";

@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.css'],
  providers: [OrdersService],
})

export class DetailsComponent implements OnInit {

  order: any;

  constructor(private _ordersService: OrdersService,
              private _route: ActivatedRoute,
              private _zone: NgZone) { }

  ngOnInit() {
    let id = +this._route.snapshot.params['id'];
    this._ordersService.getOrderWithID(id)
        .subscribe((data)=> {
          this.order = data;
          //this._zone.run(() => this.order = data);
          console.log(this.order);
        });

  }

}

orders.service.ts:

import { Injectable } from '@angular/core';
import {JsonApiService} from "../core/api/json-api.service";
import {Observable} from "rxjs/Rx";

@Injectable()
export class OrdersService {

  url: string;

  constructor(private jsonApiService: JsonApiService) {
    this.url = '/orders';
  }


  getOrderWithID(id: number):Observable<any> {
    return this.jsonApiService.fetch(this.url + '/' + id + '.json');
  }

  getOrders():Observable<any> {
    return this.jsonApiService.fetch(this.url + '/test.json');
  }

}

JSON sample:

{
  "data": [
    {
      "id": 1,
      "date": "31/10/2016",
      "number": XXXXXXXX,
      "site": "XXXXXXXX",
      "label": "XXXXXXXX",
      "amount": "XXXXXXXX",
      "quote": "XXXXXXXX",
      "state": "XXXXXXXX",
      "delivered_at": ""
    }
  ]
}

Are you getting a valid json inside your subscribe? Can you share the console.log? — eko
– eko, Commented Jun 9, 2017 at 12:10
Hi @echonax, yes I have a valid JSON (I edited to post a sample), I don't have any errors on console, just a dump of data fetched: 0 {id: 1, date: "31/10/2016", number: 9000820453, site: "NF006668 - RELAIS PROMENADE DES ANGLAIS", label: "ELAGUAGE PALMIER", …} Prototype Array — doc
– doc, Commented Jun 9, 2017 at 12:14

eko · Accepted Answer · 2017-06-09 12:18:21Z

2

You expect a JSON in your response but you are getting an Array, so:

this.order = data[0]; should do the trick.

answered Jun 9, 2017 at 12:18

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

Collectives™ on Stack Overflow

Angular 4 view not updated after fetching data from api

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related