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 constructed.

Since we’re working with a Node.js system, running JavaScript code on the backend, we can import data directly into the template instead and lay it out before the page is rendered in the browser. This results in a faster experience for our users and opens up new ways for us to be creative with our data.

Every newsroom’s system will handle this differently. Our baker framework is preconfigured to open all JSON data 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 puked out on the page.

puke

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, but we’re making progress.

_images/data-dump.png

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 files and other variables.

{% block content %}
{% for obj in harvard_park_homicides %}
    {{ obj }}<br>
{% endfor %}
{% endblock %}
_images/hello-loop.png

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 %}
_images/hello-last-name.png

Now the first name.

{% block content %}
{% for obj in harvard_park_homicides %}
    {{ obj.first_name }} {{ obj.last_name }}<br>
{% endfor %}
{% endblock %}
_images/hello-full-name.png

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.