如何在angular2应用程序中获取JSON数组响应数据

Posted 2023-02-22

【中文标题】如何在angular2应用程序中获取JSON数组响应数据

【英文标题】：How to get JSON array response data in angular2 application

【发布时间】：2018-04-05 00:30:31

【问题描述】：

我有如下 JSON 响应。我想要做的是低于 JSON 响应进入我的 angular2 应用程序。但我无法获得预期的输出。请就我的编码解决方案发表意见。

"staffinfo": 
    "id": 3,
    "DeptID": 2,
    "OfficeID": 3,
    "FirstName": "Loreiya",
    "LastName": "Cheng",
    "DOB": "1991-04-02",
    "IsWorking": 1,
    "created_at": "2017-10-22 13:07:15",
    "updated_at": "2017-10-22 13:07:15"
,
"officeinfo": 
    "id": 3,
    "Name": "Finance-Payroll ",
    "Address": "No 20/1, Cross street, dalas, Block A ",
    "Description": "staff salary division ",
    "created_at": "2017-10-24 00:00:00",
    "updated_at": "2017-10-24 00:00:00"

此数据应显示在我的 department.component.html 文件中

 <form #f="ngForm" (ngSubmit)="onSubmit(f)">
  <div class="form-group">
   <label for="depid">Department</label>
    <select name="depid" id="depid" class="form-control" ngModel>
      <option value="1">HR</option>
      <option value="2">Finance</option>
      <option value="3">Marketing</option>
    </select>
  </div>
  <button type="submit" class="btn btn-primary">Search</button>
</form>

<div *ngFor="let dep of department">
   dep.staffinfo 
</div>

这是我的 department.component.ts 文件（我可以在没有任何错误的情况下获得 Member found 警报）

import  Component, OnInit, Input  from '@angular/core';
import  NgForm  from "@angular/forms";
import  StaffService  from "../staff.service";
import  Department  from "../department.interface";

@Component(
  selector: 'app-department',
  templateUrl: './department.component.html',
  styleUrls: ['./department.component.css']
)
export class DepartmentComponent implements OnInit 
@Input() department: Department[];

  constructor(private staffService: StaffService)  

  ngOnInit() 
  

  onSubmit(form: NgForm) 
    this.staffService.getDept(form.value.depid)
    .subscribe(
      () => alert('Members found')
    );
    form.reset();
  

这是我调用后端服务的staff.service.ts文件

import  Injectable  from "@angular/core";
import  Http, Response, Headers  from "@angular/http";
import 'rxjs/Rx';
import  Observable  from "rxjs";

@Injectable()
export class StaffService
  constructor(private http: Http) 
  

getDept(depid: number): Observable<any>
    return this.http.get('http://127.0.0.1:8000/api/dept/' + depid)
    .map(
      (response: Response) => 
        return response.json().department;
      
    );
  

控制台输出

邮递员 JSON 响应

这是我调用前端 Angular2 应用程序的后端控制器 (Laravel 5.4)。

    public function getDeptinfo($id)
   
     $staffinfo = Staff::find($id);

     if($staffinfo)
         $officeinfo = Office::find($staffinfo['OfficeID']);
     

     $response = [
         'staffinfo' => $staffinfo,
         'officeinfo' => $officeinfo
     ];

     return response()->json($response, 200);
   

【问题讨论】：

请您发表完整的回复好吗？

对不起，我没有抓住你。我已经发布了所有的代码示例

能否请您发布console.log(response.json().department);

的输出

请发布 json 响应

它不是从 Postman JSON 响应中看到的数组

【参考方案1】：

您需要将 reposnse 分配给 department ：

服务：

getDept(depid: number): Observable<any>
    return this.http.get('http://127.0.0.1:8000/api/dept/' + depid)
    .map((response: Response) => response.json());
  

用这个替换你的DepartmentComponent：

export class DepartmentComponent implements OnInit 
    department: Department;

    constructor(private staffService: StaffService)  

    onSubmit(form: NgForm) 
        this.staffService.getDept(form.value.depid).subscribe((res) => 
            this.department = res;
        );
        form.reset();
    

模板端

替换这个：

<div *ngFor="let dep of department">
   dep.staffinfo 
</div>

与：

 department?.staffinfo | json 

【讨论】：

你好 Vivek，不幸的是，这对我不起作用。 ----- TypeError：无法读取 Object.eval [as updateRenderer] (DepartmentComponent.html:15) 处未定义的属性“staffinfo”

@aselanuwan，请立即查看；

@aselanuwan，请立即查看；

什么意思？我已经选择了你的答案作为正确的答案。我没有献给你。

是的，你有，但如果你也支持答案，那就太好了