6. Data¶
We’ve got our system set up. Now it’s time to start telling our story. To do that, we need our data. This chapter will guide you through how to introduce it to the page.
6.1. Import JSON¶
If we were writing this application entirely in the browser with traditional JavaScript we’d have to pull it in with dynamic “AJAX” calls that retrieve data over the web as the page is loaded in your browser.
Thanks to our framework’s templating system, we can import data before the page is served. This results in a faster experience for users and opens up new ways to be creative with data.
Every newsroom’s system will handle this technique a little differently. Our baker framework is preconfigured to detect files in the _data folder and import them into our Nunjucks templates.
Let’s give it a try. Grab the list of Harvard Park homicides published by the Los Angeles Times. It includes every homicide victim in the neighborhood since 2000 in the JSON data format favored by JavaScript. Save it to _data/harvard_park_homicides.json.
[
{
"case_number":"2017-04514",
"slug":"eddie-rosendo-lino",
"first_name":"Eddie",
"middle_name":"Rosendo",
"last_name":"Lino",
"death_date":"2017-06-18T00:00:00.000Z",
"death_year":2017,
"age":23.0,
"race":"black",
"gender":"male",
"image":null,
"longitude":-118.304107484,
"latitude":33.9904336958
},
{
"case_number":"2017-03454",
"slug":"alex-david-lomeli",
"first_name":"Alex",
"middle_name":"David",
"last_name":"Lomeli",
"death_date":"2017-05-07T00:00:00.000Z",
"death_year":2017,
"age":18.0,
"race":"latino",
"gender":"male",
"image":null,
"longitude":-118.300290584,
"latitude":33.9793646958
},
...
Return to index.html and add the following to the bottom to print the data out on the page. We can do that using the {{ }} print tags provided by Nunjucks.
{% block content %}
{{ harvard_park_homicides }}
{% endblock %}
Now restart your test server, as we’ve done before.
npm start
Visit localhost:3000 and you should see the data dumped on the page.
6.2. The for loop¶
Instead of just printing the data in one big block, let’s loop through the records and print them one by one.
We’ll use the {% %} template tags provided by Nunjucks, which allow us to use a common computer programming structure called a “for loop” when we’re laying out a page.
{% block content %}
{% for obj in harvard_park_homicides %}
{{ obj }}
{% endfor %}
{% endblock %}
The result should look much the same.
To put each record on its own line, add a line break with a <br> tag. That’s just boring old HTML. Writing pages with a templating language like Nunjucks is typically nothing more than mixing traditional HTML with the template tags that negotiate your data.
{% block content %}
{% for obj in harvard_park_homicides %}
{{ obj }}<br>
{% endfor %}
{% endblock %}
6.3. Access attributes¶
That’s good, but hardly informative. How do we start printing out the contents of the data? The fields in the JSON dictionary for each homicide are available by adding a . after the object. For instance, here’s how to print the contents of the last_name field.
{% block content %}
{% for obj in harvard_park_homicides %}
{{ obj.last_name }}<br>
{% endfor %}
{% endblock %}
Now the first name.
{% block content %}
{% for obj in harvard_park_homicides %}
{{ obj.first_name }} {{ obj.last_name }}<br>
{% endfor %}
{% endblock %}
6.4. Commit your work¶
Not bad. We’ve actually got some data on the page. Seems like a good moment to stop, take a break and commit our work.
Just to get in the habit, let’s start with the status command.
git status
Now let’s add all of the files we’ve changed.
git add .
Then we commit.
git commit -m "Printed a list of names from data"
Finally, push it to GitHub.
git push origin main
We’ve dumped the data on the page. Now let’s dress it up.