Axios Response Data Replace

Question

I'm trying to learn Axios and Vue with using Twitch API. I'm fetching data from that API and there is thumbnail_url which is for channel's thumbnail photos but I have to change that data's width and height because it's coming like this;

https://static-cdn.jtvnw.net/previews-ttv/live_user_shroud-{width}x{height}.jpg

And I was trying to do like this;

beforeMount(){
  helix.get('streams?language=en').then((response) => {
    for(var i=0; i < response.data.data.length; i++){
      response.data.data[i].thumbnail_url.replace("width", "40")
    }
    console.log(response.data.data)
  this.results = response.data.data
    })
    .catch(function (error) {
     console.log(error);
     });
},

Actually, I didn't understand what that is not working. I know there is a point that I missed. If someone can help me, It'd be great. And If It is not correct way to do this, what is the correct way? Thanks a lot.

Which part do you think is not working? Are you not getting the data in the response or are you not able to replace the `width`? — D Malan, Mar 15 '19 at 11:15
After that code when I check the console log or output, it's still looking same. Width string is not changing. — lilrevo, Mar 15 '19 at 11:23

Niklesh Raut · Accepted Answer · 2019-03-15T11:47:37.723

6

You should use replace("{width}", "40"); instead

var url = 'https://static-cdn.jtvnw.net/previews-ttv/live_user_shroud-{width}x{height}.jpg';
url = url.replace("{width}", "40");
url = url.replace("{height}", "60");
console.log(url);

In your code change this

var thumbnail_url = response.data.data[i].thumbnail_url;
thumbnail_url = thumbnail_url.replace("{width}", "40");
thumbnail_url = thumbnail_url.replace("{height}", "60");
response.data.data[i].thumbnail_url = thumbnail_url;

As you comment you can do it without variable also

response.data.data[i].thumbnail_url = response.data.data[i].thumbnail_url.replace("{width}", "40").replace("{height}", "60");

edited Mar 15 '19 at 11:47

answered Mar 15 '19 at 11:16

Niklesh Raut

34,013
16
75
109

I see but that url is not same all the time. I'm fetching data for too much channels and every channel has their own thumbnail url. – lilrevo Mar 15 '19 at 11:24
ok, then share that all info in your question, I will try to change my answer accordingly then. @lilrevo share other ulr format for thumbnail if you have ? – Niklesh Raut Mar 15 '19 at 11:25
http://prntscr.com/my8rol here is the console log of the result that i am fetching. I have to change width and height for all of them when i'm fetching data. But I couldn't find the solution – lilrevo Mar 15 '19 at 11:32
@lilrevo : I have added code, according to your vuejs code. – Niklesh Raut Mar 15 '19 at 11:38
It is worked. Thanks a lot. Should I use variable all the time when I want to do some changes? – lilrevo Mar 15 '19 at 11:43
@lilrevo : you can do it without variable but using var is good practice, have shared other code also. – Niklesh Raut Mar 15 '19 at 11:48

Axios Response Data Replace

1 Answers1