如何从我正在使用angular6的api访问JSON数据响应

Question

Here I am using the angualar6 and. I am fetching the data from the API and created a model class in typescript. I don't know where am I doing mistake. I am new In angular.

 order.model.ts

 export interface OrderModel {
  orderList: OrderList[];
  orderSearch: OrderSearch;
  role: { categoryId: string; categoryTitle: string };
}

export interface OrderSearch {
  userId: string;
  userRoleId: string;
}

export interface OrderList {
  orderId: string;
  orderMode: {
    categoryId: string;
    categoryTitle: string;
  };
  orderStatus: {
    ATVP: string;
    creator: { createDate: string };
    status: {
      categoryId: string;
      categoryTitle: string;
    };
    statusId: string;
    statusParentId: string;
  };
  payment: {
    paymentAmount: number;
    paymentId: string;
    paymentMode: {
      categoryId: string;
      categoryTitle: string;
    };
    paymentStatus: {
      statusId: string;
      statusParentId: string;
      status: {
        categoryId: string;
        categoryTitle: string;
      };
    };
    payeePaymentInfo: {
      paymentInfo: string;
      paymentMode: {
        categoryId: string;
        categoryTitle: string;
      };
    }[];
  };
  creator: {
    createDate: string;
    creatorId: string;
  };
  deliveryInfo: {
    deliveryStatus: {
      ATVP: string;
      creator: { createDate: string };
      status: { categoryId: string; categoryTitle: string };
      statusId: string;
      statusParentId: string;
    };
  };
  orderPricing: {
    price: number;
    priceId: string;
    priceText: string;
    priceType: { categoryId: string; categoryTitle: string };
    pricingRef: string;
    quantity: number;
    rentUnit: { categoryId: string; categoryTitle: string };
    statusId: string;
    unit: { categoryId: string; categoryTitle: string };
  };
}

Here is my component.ts file

@Component({
  selector   : 'app-item-detail',
  templateUrl: './item-detail.component.html',
  styleUrls  : ['./item-detail.component.scss']
})
export class ItemDetailComponent implements OnInit {
  id: number;
  price: number;
  orderDetail: OrderModel;
  ordersList:OrdersList[]=[];
  orderList:OrderList[]=[];




  message:string;
  constructor(private campusservice: OrdersService, private _campusHaatService: OrdersService, private route: ActivatedRoute) {
    this.route.params.subscribe((r) => this.id = r['id']);
  }

  ngOnInit() {

    this._campusHaatService.currentMessage.subscribe(message => this.message = message);
    console.log(this.price,'price')
    console.log(this.id, 'id');
//TODO Api calling Order by Id
    const data = {
      "orderLoadType": 3,
      "userId": "",
      "creator": {
        "id": "5794",
        "APIKey": "63923f49e5241343",
        "createDate": "2019-03-22 01:56:25.0",
        "creatorId": "402"
      },
      "start":0,
      "limit":10,
      "orderId":"1758",
      "loadType": 0
    }

    this.campusservice.orderDetail(data).subscribe((r) => {
      // console.log(r, 'detail');
      console.log('detail',r);
      this.orderDetail = r['detail'];
      this.ordersList = r['ordersList'];
      this.orderDetail.ordersList.

    });

  }


getOrderMode() {

  return this.orderDetail.ordersList.ordermode.CategoryTitle;

}

}

Order.Service.ts

@Injectable()
export class OrdersService extends CampusHaatAdminService {

  private messageSource = new BehaviorSubject('');
  currentMessage = this.messageSource.asObservable();


  constructor(public http: HttpClient,
              private router: Router) {
    super(http);
  }




  orderList(data): Observable<OrderModel[]> {
    data = {
      ...data,
      'orderLoadType': 3
    };
    return this.post('/orders/listOrders', false, data)
      .pipe(map(res => res['ordersList']));
  }

  orderDetail(data) {
    return this.post('/orders/listOrders', false
      , data);
  }

}

API Response

{
    "type": "ordersResponse",
    "baseResponse": {
        "message": "Order retrieved successfully!",
        "statusCode": "200"
    },
    "ordersList": [
        {
            "orderList": [
                {
                    "adsList": [],
                    "avgTime": 0,
                    "buyer": {...},
                    "creator": {...},
                    "deliveryInfo": {...},
                    "expecTimeLowerLimit": 0,
                    "expecTimeUpperLimit": 0,
                    "maxTime": 0,
                    "minTime": 0,
                    "orderId": "1758",
                    "orderMode": {
                        "message": {
                            "actions": [],
                            "msgSize": 0
                        },
                        "categoryId": "621",
                        "categoryList": [],
                        "categoryTitle": "Deliver"
                    },
                    "orderPricing": {...},
                    "orderStatus": {...},
                    "payment": {...},
                    "persons": [...],
                    "productList": []
                }
            ],
           "orderSearch":{...},
            "role":{...}
         }
    ]
}

I want to display the category title from the order mode in api i am new in angular. please help me out. Thanks in advance.

Answer 1

Based on your code and api response i think you want something like this

@Component({
  selector   : 'app-item-detail',
  templateUrl: './item-detail.component.html',
  styleUrls  : ['./item-detail.component.scss']
})
export class ItemDetailComponent implements OnInit {
  id: number;
  price: number;
  orderDetail: OrderModel;
  orderList:OrderList[]=[];
  orderId:number;
  orderStatus:string;
  orderMode:string;
  orderAmount:number;
  orderDate:string;


  constructor(private campusservice: OrdersService, private _campusHaatService: OrdersService, private route: ActivatedRoute) {
    this.route.params.subscribe((r) => this.id = r['id']);
  }

  ngOnInit() {


    // console.log(this.price,'price')
    console.log(this.id, 'id');
//TODO Api calling Order by Id
    const data = {
      "orderLoadType": 3,
      "userId": "",
      "creator": {
        "id": "5794",
        "APIKey": "63923f49e5241343",
        "createDate": "2019-03-22 01:56:25.0",
        "creatorId": "402"
      },
      "start":0,
      "limit":10,
      "orderId":"",
      "loadType": 0
    }

    this.campusservice.orderDetail(data).subscribe((r) => {
      this.orderList = r['ordersList'][0]['orderList'];
      let orderData = this.orderList.filter((order)=>order.orderId==this.id.toString());

      if(orderData.length>=1){
        this.orderAmount = orderData[0]['payment']['paymentAmount'];
        this.orderDate = orderData[0]['creator']['createDate'];
        this.orderStatus = orderData[0]['orderStatus']['status']['categoryTitle'];
      }
    });

  }


}