JSON "API"

Author: JackGilmore

spendover500.json.njk

@@ -0,0 +1,9 @@
+---
+pagination:
+    data: collections.spendsOver500
+    size: 1
+    alias: spends    
+permalink: "spends/{{ spends.title | slugify }}.json"
+---
+
+{{ spends.data | jsonify | safe }}

spendover500.njk

@@ -11,30 +11,34 @@ eleventyComputed:
     description: "Transactions with spend over £500 for {{spends.displayTitle}}"
 ---
 
+{% set json_link = "/spends/" + spends.title + ".json" %}
+
+<link rel="alternate" type="application/json" title="JSON version of {{description}}" href="{{json_link}}">
+
 <script id="spend-data" type="application/json">
     {{spends.data | jsonify | safe }}
 </script>
 
-<nav aria-label="Page navigation example">
+<nav>
     <ul class="pagination">
         {% if pagination.href.previous != null %}
-        <li class="page-item">            
-            <a class="page-link" href="{{pagination.href.previous}}">
-                <span aria-hidden="true">&laquo;</span>
-                <span class="sr-only">Previous month</span>
-            </a>
-        </li>
+            <li class="page-item">
+                <a class="page-link" href="{{pagination.href.previous}}">
+                    <span aria-hidden="true">&laquo;</span>
+                    <span class="sr-only">Previous month</span>
+                </a>
+            </li>
         {% endif %}
         <li class="page-item">
             <a class="page-link" href="/">Home</a>
         </li>
         {% if pagination.href.next != null %}
-        <li class="page-item">
-            <a class="page-link" href="{{pagination.href.next}}">
-                <span class="sr-only">Next month</span>
-                <span aria-hidden="true">&raquo;</span>
-            </a>
-        </li>
+            <li class="page-item">
+                <a class="page-link" href="{{pagination.href.next}}">
+                    <span class="sr-only">Next month</span>
+                    <span aria-hidden="true">&raquo;</span>
+                </a>
+            </li>
         {% endif %}
     </ul>
 </nav>
@@ -73,6 +77,9 @@ eleventyComputed:
         </table>
     </div>
 </div>
+<div class="btn-group" role="group">
+    <a href="{{json_link}}" target="_blank" class="btn btn-primary">JSON</a>
+</div>
 
 <div id="chart-spend-by-directorate" style="width:100%; height:600px;"></div>
 <div class="table-responsive">