So we have our database query, we have the database function, we have the handler and we have the
root in the API and now we can go to our all dash sales page, go HTML file and actually query that
and try to get Jason back from it.
Now, the first thing I'm going to do is in the content section here.
I need somewhere to display this information.
So I'll put a table in here and I'll give it an idea of sales DASHTY and I'll give it some bootstrap
classes.
So class equals table and table dash straight, which is enough for right now.
And I'll close my table tag before I forget to do so and I'll give it a head and a closing t head.
And up here I'll put a row in and close the row and I'll put a few columns in here just enough to displacement
information, so to say the transaction, and it'll be some kind of number and the customer to customer
and closer to page and maybe I'll put the product in there.
Even though we only have one, we might have more in the future and the amount of the sale
like that.
And then I'll come down here and put an empty t badia nothing inside at all and we'll populate that
Tebaldi using JavaScript.
OK, so that's a place where we have to store our result or to display our result then down here in
the JavaScript section or script tagging script and a closing script tag.
And I know that I'm going to have to pass my fetch statement, my token.
So let's get the token let token equal.
And this is in local storage, local storage
doget get item and we call the token.
So now I have my token and I'm also going to be putting results in Tebaldi, the Tebaldi of the sales
table.
So let's get a reference to that.
Let Tebaldi equal.
Document that get element by
and I'm looking for sales Dasch table, and then I want get element by Tangney, get element by tag
name and it's Tebaldi which I have to spell right or won't work.
And it's the first occurrence of that, which is index zero.
There's only one.
But we have to put the zero in square brackets or it won't work.
We're also going to have to have some request options.
So const request options was where we're going to call.
We're using this what we call fetch as usual.
So opening and closing curly brackets.
And I want a method and I made my post.
So I'll put post in here and we want some headers headers and that is a JavaScript object.
So let's give it its curly brackets.
And the first thing is, except as usual, we're going to accept applications last, Jason.
And the content type,
which is also application Jason
and our authorization header authorization.
And that's going to be equal to bearer B, a, r, e, r space and then append to that after the space
or token.
OK, so that gives us our request options.
Now let's call that API route using fetch fetch and as usual, we get the first part of our You Will
Eurail from DOT API, which is passed to every template in the site API admin, slash all dash sales
and then close my quotes and then request options.
And then we get then response becomes response, thought Jason.
And then we have our final then clot's then and we'll just say function data which should be in the
form of JSON by this point, if everything went well or even if everything didn't go well, we should
get a bad request in the form of Jason and I will do right now is say console log data just to see what
we get back.
So let's start our application and I'll say make start just to start everything.
You might have to stop at first, but I know mine's not running, so I don't get a porting use error.
There it is.
It's running.
So let's go back to our Web browser and I'll go to the homepage, see if I'm logged in.
I am.
I'll open the JavaScript console, go to the console and go to admin.
All sales.
And I have some kind of get element by tag name is not a function, so I have a typo there, so let's
go fix that.
It's get elements by tag name elements, plural.
OK, so let's stop this next stop, and this time I'll just start the back end.
And I'll run air in case I have more problems in my JavaScript, as I often do.
So back here, clear the console, reload this page and this time I got a value back.
So there it is, an array.
So let's go to the network tab where it's easier to see stuff.
And look at all sales of the post and look at the response and when I get back is all of this information,
which is perfect.
So object, my first object index zero has all of the widget information.
It's all there, perfect, and my second one has all of that information as well, so I should have
one for Clark Kent and I do.
And my second one should be for Bruce Wayne, and it is perfect.
So in the next lecture, we can take that, Jason, we're getting back and actually populate our table
that we have on this page and we'll get started on that next time around.