如何访问 JSON 数组数据的第一个元素?

Question

我使用Ionic作为前端，Laravel作为后端。 这是从 API URL 返回的 JSON 数据，我只想访问第一个元素，即 a.jpg 没有其他任何东西，我尝试使用filenames.[0]但它只是显示[这意味着它调用第一个字符而不是数组的第一个元素。

以下是 JSON 数据：

[{"filenames":"["a.jpg","b.jpg","c.jpg"]"}]

这是我的 .ts 文件

import { ApiLandingRecipesService} from '../api-landing-recipes.service'
@Component({
selector: 'app-landing-page',
templateUrl: './landing-page.page.html',
styleUrls: ['./landing-page.page.scss'],
})
export class LandingPagePage implements OnInit {
datauser: any[];
constructor( public api: ApiLandingRecipesService) { }
ngOnInit() {
this.getDataUser();
}
async getDataUser() {
await this.api.getDataUser()
.subscribe(res => {
console.log(res);
this.datauser =res;
console.log(this.datauser);
}, err => {
console.log(err);
});
}

这是我的服务文件：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { catchError, tap, map } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';

const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
};
const apiUrl = "https://example.com/showimages";
@Injectable({
providedIn: 'root'
})
export class ApiLandingRecipesService {
constructor(private http: HttpClient) { }
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
console.error('An error occurred:', error.error.message);
} else {
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
}
return throwError('Something bad happened; please try again later.');
}
private extractData(res: Response) {
let body = res;
return body || [] ; }
getDataUser(): Observable<any> {
return this.http.get(apiUrl, httpOptions).pipe(
map(this.extractData),
catchError(this.handleError));
}

}

Answer 1

这是因为filenames确实是一个字符串(数组的json字符串表示形式(而不是数组。

首先尝试将字符串转换为数组。

JSON.parse(filenames)[0]

Answer 2

这里的filenames值是一个字符串而不是数组，这就是为什么当你尝试访问第一个元素时你会得到[。

您可能需要解析该值，这里有一个例子(假设datauser(是您向我们展示的 JSON 数据。

let filename = JSON.parse(datauser[0].filenames)[0]