So basically we're going to give it a nice name. So if we go to our redux dev tools, I'm just going to right click on the browser and click on Redux DevTools to the left. And we click on let's see, let's go to chart or not chart but Inspector, or log monitor is what I want.

So basically if we go to log monitor and look down here on posts, make sure you have the web app open and you search for something before or this will be empty. Let's go to post and let's go to results post and let's go to the first one.

So basically you'll see that it's a big long link and we don't really have a, we don't really have access to a, or actually not url for post, but post links. Basically in here you'll notice that these objects in here don't have a name. So we can either fix that on the back end if we had access to the back end or I could go to Jordan and have him fix that sense this is his API, or we could write a quick fix and then go ask him to fix it, so the user can see something nice and tell them.

So basically what we want to do is take this last bit of information. You'll see it says here, let's use a different one because this one has numbers, but basically you'll see on this one it says Ruby on Rails code audits eight steps to review your app.

So basically we want to take that little bit of information and let's just display that on the screen, instead of this whole link and let's just have that be the link. Now we can do this pretty easily and it's by using the javascript substring method, so let's go ahead and check that out.

You'll see here we have this method called JavaScript String substring method.

It's part of the String class so it's just a method inside of the String class that will allow you to basically call it and specify what you want the substring of. So in this case I clicked try it yourself and I got to this just by googling javascript substring.

Basically if we tried this and we hit try it, it will say ell. Now, the reason this is happening is because they have the string Hello World and they're saying okay let's get a substring from hello world from string and let's start it at index one and ended at index 4, right before index 4, so 0,1,2,3,4 so it's getting ell.

If we were to go 1 and 5 it's going to get ello, I'm surprised they didn't do that because it's cooler. Anyway another thing we can do to get into the string is by using string.length. Now this is what we need to do in ours, because if we take a link or grab a link really quick and we throw it in here as, I'll just put it after res and override string or after I've read all of this, I'll say string so str is equal to that.

Basically if we have this link and we want to get its last piece we just need the end we need the end index so we can easily do this by saying instead of saying 5 we could just say str.length. And then if we had run and try it we'll get ello world!

So basically we can do the same thing, I'll copy this str and I will replace it right here. So var str is equal to https and so on. So now if we have run we're getting, well actually I'll start it at zero because we want the h in there, if I do it with the one it's going to start at TTPS instead of HTTPS so I'll do it at zero and str.length so we're getting the whole entire string basically.

Now this is a problem because we want to start it right here with imperative, but we can't just count this and say okay it's at like index 20 or something and then manually type it in because each link is going to be a bit different. You'll see in our Redux DevTools here we have a link, we'll copy it over, and I will say, we'll put it like right here so var is or I'll just say str is equal to this link.

So you'll see that this is much longer and this is different. So basically if we were to say let's see one two three four five six seven eight, I'm not going to count it all, but basically if we put the amount it requires I'm just going to guess 20, oh so close, I'm going to put 23.

So basically if I put 23 in str.length we get it right, because it's starting at the 23 index and it's ending at the end. So if we apply the same exact substring on this string, I'm gonna cut it and put it right below the string so it's going to over write the stream before it gets to the substring. It's not going to get what we want, it's going to get somewhere over here in .com or something or it will start at .com I think.

Sweet, so .com entries Ruby on rails. So basically we don't want all this information right here, we just want Ruby on Rails code audits 8 steps to review your app. So we can't hard code it, we need to introduce another method and this is pretty simple, we can even write it ourselves but javascript has a nice, I'll leave this in here so we can test it afterward, but JavaScript string class has a nice method that's already built for us, it's called lastIndexOf.

So I have this open right here, just google last index of JavaScript string W3, and you'll get to this, or just click the link.

So basically it allows us to grab the last index, so in Hello planet earth, you are a great planet. It's saying str.lastIndexOf planet, so it's going to get the last index of this. I'm going to click try it your yourself, and I'm going to click run, and then I'm going to click try it, so it gets 36.

Now I assume they have a first index method so I'm just going to replace last with first and hit run, I guess they don't. That's pretty dumb, but I guess that's what index of is, I bet if you just say indexOf it's going to grab the first instance of planet.

Yes, so basically it starts at 6. But then the last index of course starts at 36 because that's the last one. So if you can imagine we're going to use this method except for we're going to do it on the slash here and we are going to say last index of slash. So let's say below or let's say right here let's say var and for index I guess, and let's just say because I think that's what they use in this, yeah they used end, or n. So I'll just type it out.

So in the try it editor I'm gonna say var n is equal to str.lastIndexOf slash and then I'm gonna hit Run.

try it editor

var n = str.lastIndexOf('/');

Now, well I'm not going to hit run yet. We're actually going to replace this 23 with the n because now if we hit run and try it, it's going to get the last index of this and that will work on all of these, right. So I'll get rid of this, I'll just cut it out and hit run again, you'll notice it works on this too.

But we don't want the slash, so let's find a way we can get rid of that. It's really simple so basically the index, what it's returning is the number obviously because 23 was the number so n must be in number. So all we need to do is say plus 1. If we hit run we get rid of that slash, so that works great.

So let's end the guide here, because this is going on pretty long and let's actually implement this function into our app and we're going to run into another problem. Actually a couple more that we'll have to modify this method to accommodate to. So let's go ahead and not commit our code sense we didn't change anything. And let's hop into the next guide where we will utilize this logic in our application so we can get these nice titles here, so I'll see you the next guide.