issue with httpclient request Array in Angular

Question

I am using httpclient request to get data from wordpress API, and in response I am getting error. It seems issue with Array in response. here what is the code I am using

getTetimonialData() {
    this.http.get<{ testimonials: any }>(BASE_URL + '/testimonial/').pipe( map( testimonialsData => {
      // return testimonialsData;
      return {
        testimonials: testimonialsData.testimonials.map(testData => {
          return {
            id: testData.id,
            date: testData.date,
            slug: testData.slug,
            title: {
              rendered: testData.title.rendered,
            },
            yoast_meta: {
              yoast_wpseo_title: testData.yoast_meta.yoast_wpseo_title,
              yoast_wpseo_metadesc: testData.yoast_meta.yoast_wpseo_metadesc,
              yoast_wpseo_canonical: testData.yoast_meta.yoast_wpseo_canonical,
            },
            acf: {
              video_url: testData.acf.video_url,
              video_image: {
                url: testData.acf.video_image.url,
                alt: testData.acf.video_image.alt,
              }
            }
          };
        })
      };
    })).subscribe(transformData => {
      this.testimonials = transformData.testimonials;
      console.log(this.testimonials);
      this.testimonialFetch.next(this.testimonials);
    });
  }

and here is the error

ERROR TypeError: Cannot read property 'map' of undefined

I have even tried to use tesimonialData.map as response is already in Array, but this also shows warring that testimonial type any not allowed.

This Error is for line where i am looping through data not with the rxjs map function.

so is I am doing something wrong?

Please see angular.io/guide/http and try to structure your code that way also I would suggest to use typescript Interface instead of mapping it to a JSON — dota2pro
– dota2pro, Commented May 10, 2019 at 16:01
Can you show a representation of what your testimonialsData looks like when you console.log(...) it? — Daniel W Strimpel
– Daniel W Strimpel, Commented May 10, 2019 at 16:01
@DanielWStrimpel testimonialData is an Array here is the link of http resquest triadofhealth.websitehelpdesk.in/wordpress/wp-json/wp/v2/… — Chirag S Modi
– Chirag S Modi, Commented May 11, 2019 at 5:17

Daniel W Strimpel · Accepted Answer · 2019-05-11 18:26:43Z

1

Your GET request type is incorrect. Below is a pic from the URL you shared in the comments.

Instead of this.http.get<{ testimonials: any }>... it should be of type this.http.get<any[]>... since the response is a list of the testimonials and not an object with a testimonials property. Ideally you would have an interface to use for type safety, so instead of any[] it would maybe be ServerTestimonial[].

answered May 11, 2019 at 18:26

Daniel W Strimpel

8,5002 gold badges31 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

issue with httpclient request Array in Angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related