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

Posted 2023-03-13

【中文标题】如何从我使用 angular6 的 api 访问 JSON 数据响应

【英文标题】：how to access the JSON data response from the api I am using angular6

【发布时间】：2020-01-19 08:24:01

【问题描述】：

这里我使用的是angualar6和。我从 API 中获取数据并在 typescript 中创建了一个模型类。我不知道我在哪里做错了。我是新来的。

 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 ;
  ;

这是我的 component.ts 文件

@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 响应

    "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":...
         
    ]

我想在api中显示订单模式的类别标题 我是角度的新手。请帮帮我。 提前致谢。

【参考方案1】：

根据您的代码和 api 响应，我认为您想要这样的东西

@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'];
      
    );