- [Instructor] Building a JSON schema from scratch
can be a challenging and tedious process.
You can get a leg up on coding the components
and the basic structure though
by using a schema generator,
like the one at jsonschema.net.
A schema generator allows you to enter an example
of valid JSON that you want to validate,
and choose some schema options.
It then automatically generates a schema
that fits your data and any selections you've made.
The H+ Sport API can return a number
of different categories of data,
including data on people.
In the code for this video,
the data is stored in the data.js file,
in the rawPersonData variable, which is on line three.
It consists of a single property, cards,
containing an array of objects.
Each object contains three properties,
and two of those properties contain sub-objects as values.
So there are a number of levels in this data,
and several different properties scattered throughout.
Instead of trying to build out a schema from scratch,
I'm going to select and copy the JSON
from the opening curly brace to the closing one.
So again, leaving off the quotes.
Going all the way down to the bottom.
And I'm going to copy that to the clipboard.
When you open the main page of jsonschema.net,
you may be asked to create an account
but there's also an option
to just continue as a guest,
and that's what I've done here.
So the left side of this app is the JSON section,
and the right side is the resulting schema.
So I'm going to start by selecting the contents
of the JSON box and deleting those.
And then I'm going to paste in the JSON I copied
from my web page code.
Notice that the tool checks for valid JSON
and confirms that I'm good to go on that front
with the notice just above the JSON box.
It says your JSON is valid,
and gives me a green check mark.
If I click Settings up here,
near the top of the left column,
I have a number of options.
And I want to customize a couple things.
First, I'm going to click keyword visibility.
And this lets me select whether certain keywords
are included in the schema.
Examples is selected by default,
which can be useful in understanding a schema
you didn't create or haven't worked with in a while.
But the examples can make the overall structure harder
to understand, so for now, I'm going to uncheck that.
And then I'll click outside that list to close it.
I also want to customize the URI for this schema.
So I'll select the value in the absolute URI box,
and I'll delete it and then I'll enter the one
I've been using, http://hplussport.com/schemas/person.json.
And so this is different
than the one I've been using actually.
This is specifically for the person data.
And then I'll click Save to save my selections.
And then at the bottom of the left pane,
I'll click Submit.
And the tool is generating JSON schema code based
on the JSON data I pasted.
And now on the right side of the app,
the box displays the newly generated schema.
And as I examine this code,
I notice a couple things.
First, it includes a $schema value by default,
along with $id, type,
title, and description.
So these are all metadata keywords for the schema.
And as I scroll through the data,
when I start looking at things,
I notice that every property
that was included in my data is marked as required.
Now, in my case, those properties are all required,
and so I'm fine with what's going on here
but if any of them weren't required,
I could simply remove that extra keyword.
Also notice that in addition to the description property
for the root structure,
all of the other properties in my schema
have a description property as well.
This can be useful for documentation purposes.
At this point,
the schema generator has fulfilled its purpose,
which is to take care of the bulk
of the tedious work and get me most of the way there.
So I can copy the code from the schema
from the right side of the app,
and it actually have a copy to clipboard button.
So I don't have to select it first.
Then back in my code in my editor,
I'm going to open up schema.js
and I'm going to add a new variable from my personSchema.
So at the bottom, I'll say var personSchema,
and I'll set that equal to the value I just copied.
So I'll just paste that in.
And I'll add a semicolon at the very end for completeness.
And then scrolling up,
I'm going to look at the very first meta properties.
So on lines 41 and 42,
these are just very generic title and description.
So for the title, I want to change that value
to h+ Sport People.
And for description,
I want to change that value
to schema for h+ Sport person cards.
Now that I have a schema for my data,
I'll open up a schema validator,
just to verify that it works as I expect.
And I've been using a live version of Ajv
that's hosted online.
I'll copy my edited schema,
and that's just the value.
So everything within the curly braces,
including the curly braces.
And then over in my validator,
I'll paste what I've copied
as the value of the schema variable.
And then back in my code in data.js,
I want to copy the value of the PersonData variable.
That's rawPersonData.
So that's everything but the quotes.
And then scrolling down within my validator,
delete the second test function call.
And then in the first test function call,
I'm going to delete the contents of the parens,
and I'm going to paste my data within the parens.
And then I want to scroll down,
and click the Run button.
And after a moment,
I should see a response here.
Now, I have an error here,
and it looks like the schema validator disagrees
with the inclusion of the additional items property
at the root level because the object is not an array.
So back in my editor, I'll go to schema.js,
and I'll go to my personSchema,
and down here on line 54,
I'm going to go ahead and delete this line.
So it's automatically added by the schema generator,
but I'm going to save that here.
And I will once again copy the value of personSchema.
And go over to my validator,
and paste that in again.
I could just make the changes in the validator
but there's a real concern there
that I might make the changes there
and forget to save them in my file,
and then end up with the schema that I'm using
that doesn't match the one that actually passed validation.
So with my new schema here in place,
I'll go down and I'll click Run again.
Have to wait a second for that to run.
And now I have valid.
This is why it's super important
to test even a generated schema.
Sometimes that includes simply making sure
that your schema works
for what your schema validator expects.
Even with the little change that I needed to make,
I have a schema for person data
that took relatively little work to create.
So schema generators are a really useful starting point
for building schemas.