CODEWITHSUNDEEP
jsonionic-frameworkionic5
لذيذ دوتكوم
لذيذ دوتكوم

Reputation: 1

How can I access the first element of JSON array data?

I'm using ionic as a front end and Laravel as a back end. This is the returned JSON data from an API URL, I want to access just the first element which is a.jpg without anything else, I tried using filenames.[0] but it's just displaying [ which means that it's calling the first character not the first element of the array.

Here's the JSON data:

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

Here's my .ts file 

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

and Here's my service file: 

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


}

Upvotes: 0

Views: 2776

Answers (2)

Spherical Flying Kat
Spherical Flying Kat

Reputation: 91

The value of filenames here is a string and not an array, which is why you're getting [ when you try to access the first element.

You probably need to parse the value, here's an example (assuming datauser) is the JSON data you've shown us.

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

Upvotes: 1

iOSonntag
iOSonntag

Reputation: 121

It's because filenames is indeed a string (a json string representation of the array) and not an array.

Try converting the string into an array first.

JSON.parse(filenames)[0]

Upvotes: 1

Related Questions