Check out a free preview of the full Go for JavaScript Developers course:
The "Template Errors & Data" Lesson is part of the full, Go for JavaScript Developers course featured in this preview video. Here's what you'd learn in this lesson:

Brenna gives a brief introduction to what the go template is doing, then demonstrates what an error would look like if the template cannot be parsed by the application. How to pass data into the template to be rendered when the template is executed is then live-coded into the application.

Get Unlimited Access Now

Transcript from the "Template Errors & Data" Lesson

>> So based on what we're looking at, we have a section that has No Todos at the bottom and then we have a form at the top with a title. Let's pop back over to our HTML file and kind of talk about what is happening in there. Cool, so if you hang out down here in the body of our HTML, you'll see our first h1 which makes sense, we have a form we'll talk about in a little bit, and then we have what Go was using for templating.

[00:00:29] And so it looks like Go is expecting a few different variables, we're not going to talk too much about the templating language today, but what I do want to call attention to are the variables it's expecting. So it looks like based on this index here, we need a couple different things, we have an if block, not meaning if something doesn't exist, and the variable we're expecting is something called PageTodos.

[00:00:50] So if there are no todos show this h2, otherwise, we're using that range keyword again and iterating over a collection, which is our variable PageTodos. This dot is telling the template that we're talking about a variable, and then as we iterate over, we want to create a div where each of the todos has a title and a content, so these attributes are important to our PageTodos collection.

[00:01:14] And then we have a couple of end blocks that indicate that we're done iterating over all of the things. So the reason why I'm calling this out is we're going to start building some structs and these structs are going to require these exact names. If you're getting type errors, keep an eye on the fact that we want variables that say PageTodos title and content, they need to match actually what's happening in our HTML, so something to keep in mind.

[00:01:38] The other thing I'd like to call out is that our form, the action is being sent to /add-todo with a POST method. So as we're building out our next routes, we need to keep an eye on what is our form looking for, and it's looking for add-todo. Cool, now let's pop back over to our server and just as an initial demonstration, I'm gonna hop into HTML and just remove one of the curly braces, which is going to be an error, and if I go back to my server and restart it here, Things seem fine, if I go back to my browser and refresh, Scroll up to the error, You're gonna see that error that we're trying to handle, so template parsing error template todos unexpected curly brace.

[00:02:33] So by handling our error in our code, we are now allowing us to have some information, it's being logged to wherever we're trying to log it right now we're just printing it out in our console. But it allows us to have a little bit more information about what's happening behind the scenes by kinda specifying the exact error we want to see.

[00:02:48] So making sure that error handling is working great, I'll put that curly brace back and go back to our server.go. Cool, so that's the functionality to our form, so when we call todos, we actually want to iterate over those todos if they exist and put them on the screen.

[00:03:07] We don't have a database, we're not going to create a database or work with that right now, so we're going to kind of fake it with some mock data. So first of all, let's create an empty array of todos that we want to iterate over at some point, and we know it's going to be a collection, a slice of let's call the type todos or todo singular.

[00:03:27] And so this is going to need to be a struct that we haven't defined yet, let's define one of those. For visibility, I'm going to put the struct and the todos and the functions all close together, typically, you would keep all your structs up at the top of the file, but just so everyone can see the code in the same place, I'm gonna write it here for now.

[00:03:47] So we're gonna say type Todo struct. And if we go look back at our HTML each to do needs two things, it needs a title and it needs a content, so in server.go in our struct, we can say Title, which is a string and Content, which is also a string.

[00:04:18] Add a comment, With a title and content, so unless we're seeing a different error our function todos has the same name as our variable todos. So I'm gonna do a quick modification, where instead of just saying todos for this function, I'm going to rename to be getTodos, you could say todo index or whatever you're gonna do, I'm gonna say getTodos.

[00:04:43] And then in our route here on line 36, the route can still say todos, the function itself should be getTodos. So we're simply renaming this so it doesn't conflict with our variable declaration here, so now that gets rid of that error message. So this t.Execute line here, we passed it nil as a second argument because we didn't have anything to give it right away, but we know that our template is gonna need some information.

[00:05:10] So here we're going to pass it a variable that we haven't defined yet, but preemptively we're going to say, pageVariables, so these are all the variables that our page is going to need to render that we haven't quite defined. So let's save that guy, and then at the top of our getTodos function, let's define what that variable is, so we have pageVariables.

[00:05:33] We're going to use a shorthand syntax, and set that to another struct we haven't created I'll call it PageVariables, and open up the curly braces. And so our page variables are going to be what our pages iterating over, so we'll hop back over to the HTML just to confirm, we're seeing that our page is expecting a variable PageTodos.

[00:06:01] And then up here, we kinda glossed over this, but it's also expecting something for the title for that tab on the top of our page, so those are the two things we need to pass to our HTML template. So back in server.go, [COUGH] in our page variables instance here we're creating a new one, and so the first one will be PageTitle, and here I'll say Get Todos, which is a string and then our PageTodos will be our array of todos that we've defined on line 20.

[00:06:41] So notice, we're getting yelled at here because we haven't actually defined what the struct looks like. So right below our Todo struct, I'm gonna create a struct called type PageTodos, which is a struct. Sorry PageVariables. And within here, The two things we want are PageTitle and the type of that will be a string, whatever text we want to see in our browser tab, and then our PageTodos which will be a slice of our Todo struct, which we have defined above.

[00:07:20] And as always, we need our PageVariables comment, So if I save this and then we restart our server, Flip back over to the browser and restart, you'll still see No Todos, our array is empty, it's iterating over an empty array of elements. But you will see that the title at top of the page here does say Get Todos, so our variables are being successfully passed to a template.

[00:07:52] Just for kicks, if I put in some quick title, some content and hit Submit, you'll notice that at the top of the page here we're seeing that add-todo route because our form is submitting this information, it's making the request to /add-todo. We don't have anything handling that, so let's add some implementation for both adding a todo and then seeing that render on the page to add an actual todo to our empty array.