CODEWITHSUNDEEP
javascriptreactjsapi
shivetay
shivetay

Reputation: 354

How to get data from API based on other values types

I have a question, that i can't resolve. I have a API reques fere i need to get Image from that API. I have Images section fhere i have something like this:

[{Id: 16, Type: "COVER",…}
 {Id: 18, Type: "HIGHLIGHTS",…}
 {Id: 23, Type: "COVER",…}
 {Id: 24, Type: "FRAME",…}
]

I need to get my image URL from type FRAME In React i did get title, and ID, but this was easy. I am stuck on Image

return (
        <Fragment>
          {data.map((movie) => {
            return (
              <div key={movie.Id} className='Home__Card-content'>
                <img src={movie.Images.Url} alt='poster' />
                <h2>{movie.Title}</h2>
              </div>
            );
          })}
        </Fragment>
      );

Thanks for any help

API response

API response

Upvotes: 0

Views: 132

Answers (3)

Rahul Kumar
Rahul Kumar

Reputation: 3157

Filter your images array for ImageTypeCoe as FRAME using filter() method.

<img src={getImages(movie.Images)[0].Url} alt='poster' />

const getImage (images) => images.filter((data) => data.ImageTypeCoe === "FRAME");

Using find() method:

<img src={getImages(movie.Images).Url} alt='poster' />

const getImage (images) => images.find((data) => data.ImageTypeCoe === "FRAME");

Upvotes: 1

Ran Turner
Ran Turner

Reputation: 18036

You can use find for that.

The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

let url = "";
const frame = movie.Images.find(x => x.ImageTypeCode === 'FRAME');
if (frame){
   url =  frame.URL;
}

Upvotes: 1

Ardeshir Izadi
Ardeshir Izadi

Reputation: 1073

If it is indeterminate that always FRAME is the first element or not, you'll need to find it in array.

e.g. :

movie.Images.find(img => img.ImageTypeCode === 'FRAME').Url

Upvotes: 1

Related Questions