Angular 2 - 从http.get获取json文件名

在服务器目录中，我有一个json文件列表。我需要将每个json 文件名导入到我的angular 2组件或字符串或其他结构中。Angular 2 - 从http.get获取json文件名

我尝试使用此服务将http.get创建到Web服务器。

export class AnUtenteService { 
    getFiles() : Observable<string[]> { 
     return this.http.get(directory) 
     .map(this.extractData) 
     .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
     let body = res.json(); 
     return body.data || { }; 
    } 
    private handleError (error: any) { 
    let errMsg = (error.message) ? error.message : 
    error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); // log to console instead 
    return Observable.throw(errMsg); 
    } 
}

但是当我的组件我叫anutenteservice.getFiles（）我得到这个错误：在JSON 意外标记<在位置0。这是我的组件

export class OrderslistComponent{ 
    newsList; 
    errorMessage; 
    constructor(private anutenteservice: AnUtenteService, private http: Http) 
    {} 
    ngOnInit() { 
    this.anutenteservice.getFiles() 
    .subscribe(data => this.newsList = data, 
       error => this.errorMessage = <any>error); 
    } 

}

我不明白哪里是错误。我该怎么办？

来源

2017-04-27 ndrn

在我看来，像你发送的请求是返回HTML而不是JSON，因为第一个字符是“<”。请查看Chrome控制台中的“网络”选项卡，并查找此http服务发送的请求，并查看响应以确保它是JSON。 –

你在某处使用JSON.parse吗？ – Powkachu

@AhmedMusallam网络选项卡中的响应类型是text/html，我发送的请求是application/json ..这是问题吗？我怎样才能返回一个JSON类型而不是HTML？ – ndrn

尝试做这样的结构：

export class OrderslistComponent { 
    newsList; 
    errorMessage; 

    constructor(private anutenteservice: AnUtenteService) { 
     this.anutenteservice.getFiles.subscribe((data) => { 
       this.newsList = data; 
      } 
     ); 
    } 

    ngOnInit() { 
    }  
}

并添加Http到服务类。添加到您的服务类：

constructor(private http: Http) { 
}

更新1：

尝试改变类型，在这里：

private extractData(res: Response) { 
     let body = res.text(); 
     return body.data || { }; 
    }

如果你的反应类型不是JSON。

来源

2017-04-27 13:19:29 SrAxi

我尝试这个解决方案，但不要改变..也许它取决于html而不是json的响应类型。 – ndrn

@ndrn检查我的更新，希望它可以解决问题。我认为响应类型是JSON。 – SrAxi

使用这条指令我有页面的html代码，但我要做的是从服务器目录读取以获取存储在此目录中的所有json文件的名称..是否有JavaScript函数可以读取从这个服务器目录？ – ndrn

Angular 2 - 从http.get获取json文件名

回答

相关问题