How to change a key value in a response using angular http

Issue

I have a scenario where I'm getting the below json as response.

[{
        "ImagePath": "/folder/images/products/1.jpg",
        "LanguageId": 2,
        "Id": 2,
    },
    {
        "ImagePath": "/folder/images/products/2.jpg",
        "LanguageId": 3,
        "Id": 3,
    }
]

Here I have domain name as www.getimage.com so now I'm combining url = domainname + imagepath.

e.g.  www.getimage.com/folder/images/products/2.jpg

But here the problem is whenever I hit the url it is redirecting to another url.

e.g.  www.getimage.com/protected/cart/img/products/2.jpg

How can I handle this image url redirection?

Solution

You should give more info (how you invoke the get, ...), but, if I've understood well, I supouse that you always receive an array of that kind, so maybe you can fix it with a pipe and some ImagePath mapping transformation, something like this:

import { map } from 'rxjs/operators';


return this.http
.get<SearchImageResponse[]>(this.url, { params})
.pipe<SearchImageResponse[]>( 
    map ( (_responseArray: SearchImageResponse[]) => (_responseArray.map( image =>  image.ImagePath = 'www.getimage.com' + image.ImagePath ) ) )
);

obviously, with your url, params, and type...

or easier if you are doing 'your stuff' in a subscribe:

this.http
.get<SearchImageResponse[]>(this.url, { params})
.pipe<SearchGifResponse[]>( 
    map ( (_responseArray: SearchImageResponse[]) => (_responseArray.map( image =>  image.ImagePath = 'www.getimage.com' + image.ImagePath ) ) )
)
.subscribe((response) => {
    // response should still be a SearchImageResponse[]
    response = response.map( (_responseArray: SearchImageResponse[]) => (_responseArray.map( image =>   image.ImagePath = 'www.getimage.com' + image.ImagePath ) ) );

}

or this one:

let transformedArray:SearchImageResponse[] = [];

this.http
.get<SearchImageResponse[]>(this.url, { params})
.pipe<SearchGifResponse[]>( 
    map ( (_responseArray: SearchImageResponse[]) => (_responseArray.map( image =>  image.ImagePath = 'www.getimage.com' + image.ImagePath ) ) )
)
.subscribe((response) => {
    // response should still be a SearchImageResponse[]
        this._historialBusqueda.forEach( _img => {

      _img.ImagePath = 'www.getimage.com' + _img.ImagePath;

       transformedArray.push(_img);


    });
}

Sorry, I can't test this now, I'm not sure if this work. But I hope it helps.

Answered By - Juan Vicente Berzosa Tejero