Apply for the next session


There are a great many data sets out there to use. But most of them are in JSON. It seems to be the most popular data format these days.

There aren’t a lot of collections of data that are stored as PHP associative arrays. Luckily, built-in functions usually decode JSON into any format you want. That’s probably why it’s so popular. It’s not that much different than PHP, and it’s actually JavaScript. JavaScript Object Notation. So it’ll be a nice bridge toward that too.

If you're in our course...

Then you’ll have learned PHP long before we talk about JavaScript.

The data structures look like this. You’ve got your regular ol “Array” and you have your “Associative Array.”

JSON! It's easy, right?

All you do is look at this… and it makes sense! (not)

but it does look cool…

You don't need to learn JavaScript to use JSON

Here’s the PHP you’ve been working with. Here’s some JavaScript. It’s pretty similar, right?

It uses colons instead of those arrows. And the keys don’t usually have quotes. And it uses curly braces for key:value pairs instead of square brackets for everything like PHP. But mostly the same idea. Would you agree?

The same concepts

Number, String, Boolean, Array, and key:value pair types. And of course you can compose those any way you want (as long as you follow the rules).

JavaScript Object Notation

There’s no variable assignment in JSON because it’s just pure data. That also means there’s no semicolon to end the statement. And there are absolutely no trailing commas allowed. That means the last item in a given list – doesn’t get a column. It’s kinda annoying… but there was historical reasons why it’s that way. And now it’s stuck that way forever. It’s OK.

Why do we have to use quotes?

If you note the figure above, you’ll see that the JSON has quotes around its keys. We left an example in there. JavaScript variables and keys are usually written in camelCase. But what if the data’s key includes a space! What would we do? It would all break. Look at the key for my number.

So, Doug put quotes around them. That solved it. And well, that’s the rules.

Valid JSON

Here are some examples. You’ve got a regular array of a few strings, a little object of a few data points, an array of objects, and an object with some data and a sub array.

When you go to pick out your data source for the challenge, pay close attention to how they chose to format their data.

(The last one is pretty great if you’re writing your own because it gives you the data but also the ability to add info about the data and add to extend it and add more arrays later)

For what we’re doing today – almost any JSON file will do.

But you need PHP - not JSON!

JSON is the way the data is stored these days. It used to be XML but JSON eventually took a huge lead. That’s the most likely way to store information for web applications.

But we’re still using PHP – and until we get to JS-based projects – we still need the data to be written in PHP-style arrays, associative arrays, and multidimensional associative arrays. (It’s even a lot of work to just say it!)

You still need to know how to write the PHP! So, no cheating. Learn it. But also – utilize some bigger datasets early by transforming that JSON into PHP.

Two very helpful functions

JSON is a file format too. Did we forget to mention that? You can get a file’s contents with a function called file_get_contents(). Then you can take that JSON data and decode it and turn it into PHP with a function called json_decode().

(The second argument with true is to specify that the PHP is an associative array like we want it to be)

Check out the manual:

The JSON must be 100% valid

If it’s not… it’ll just totally not work.

Finding and converting JSON with an online tool

This is when you’re trying to get an already created data set.

Don’t write your own data – in JSON format – and then use a third-party tool to turn it into PHP. That’s silly. And way more work, Burooj!

Validation and Formatting

This will likely be your first introduction to the idea of “linting” and auto-formatting.

Pretty JSON

Suggested PRETTY JSON settings

Pretty JSON.sublime-settings
	"validate_on_save": true,
	"pretty_on_save": true,
	"bracket_newline": false,
	"indent": "\t",

How did we do?

Do you have any questions? Let us know what we can clarify!

Practice makes perfect

  1. Find a simple piece of JSON and try it out

    You can search “JSON cars” or anything you want. Here’s a nice list:

    Get a basic loop going to hydrate a template with a few properties.

    30 minutes suggested
  2. Find a more complex set of data with some nested data

    Find something with a little more complexity. Look for sub-lists or some booleans and try out some conditional styling or anything the data inspires.

    45 minutes suggested
Apply for the next session