Angular Js解析更深层次的JSON文件

Question

我正在尝试解析对象内的数组。我试图将结果映射到数组，但无法到达数组的位置。

我的JSON看起来像这样。

{
  "id": 1,
  "projectName": "Opera house",
  "projectDescription": "This image was taken during my first photography course.",
  "thumbnailImageName": "1.JPG",
  "projectDetails": {
    "id": 1,
    "relatedPhotos": [
      "1.JPG",
      "2.JPG",
      "3.JPG"
    ],
    "location": "Sydney",
    "scope": "Learn basic of photography",
    "description": "Some description"
  },
  "favouriteProject": true
} 

我正在从这样的服务器映射HTTP响应。

this.projectService.getProjectDetailsByProjectName(projectName).subscribe(res => 
      {
        Object.keys(res).map(key => {
          this.projectDetails = res[key];
        })

    });

上面的映射为我提供了projectDetails对象但无法访问其中的数组。访问阵列时，我输出三次。两次未定义，最后是实际值。任何人都可以指导我如何正确解析上面的JSON文件吗？

非常感谢..

************编辑代码**************** 获取http响应并解析每个对象的代码如下：

getSelectedProjectWithDetails(){
    const projectName:string = this.activatedRoute.snapshot.paramMap.get("project-name");
    this.projectService.getProjectDetailsByProjectName(projectName).subscribe(res => {
      // console.log(res.relatedPhotos);
      Object.keys(res).map( (key, value) => {
        this.projectDetails = res[key];
        console.log(this.projectDetails["relatedPhotos"])
      })
    })
  }

我的项目界面为

export interface project{
    id:number;
    projectName: string;
    projectDescription: string;
    favouriteProject: boolean;
    thumbnailImageName: string;

    projectDetail: projectDetail;
}

和projectDetails接口为：

export interface projectDetail{
    id: number;
    relatedPhotos: String [];
    location: string;
    scope: string;
    description: string;
}

和http获取请求是

 getProjectDetailsByProjectName(projectName: String): Observable<project>{
    return this.http.get<project>("http://127.0.0.1:8080/project/"+projectName);
  }

Answer 1

您可以使用 map（）使用 json（）方法将HttpResponse正文转换为JSON。由于响应包含正文，标题等。 json（）可用于仅解析正文。

请查看以下代码以了解相同内容。

this.http.get('https://api.github.com/users')
  .map(response => response.json())
.subscribe(data => console.log(data));

如需了解更多信息，请参阅documentation

Answer 2

作为替代方案，您可以在从observable映射回复后使用JSON.parse(res);。

像这样

   Object.keys(res).map(key => {
      JSON.parse(res);
      this.projectDetails = res[key];
    })

但是我使用的是res.json（）;

addNewProduct(data: any): Observable<string> {
    return this._http.post(this.addNewProdUrl, data).map(res => res.json());
}

不确定您的资源有什么问题。