# Working with static data

**URL:** <https://forum.ghost.org/t/working-with-static-data/8409>\
**Category:** Themes\
**Created:** [July 24, 2019, 5:22pm UTC](https://forum.ghost.org/t/working-with-static-data/8409 "2019-07-24T17:22:51Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![vzelenko](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/vzelenko/32/4160_2.png) [@vzelenko](https://forum.ghost.org/u/vzelenko)\
**Post date:** [July 24, 2019, 5:22pm UTC](https://forum.ghost.org/t/working-with-static-data/8409/1 "2019-07-24T17:22:52Z")

</div>

I’m building a theme to match an existing website. The site currently has a menu with multiple areas on the primary page, linked by hash anchors.

Some of these areas have data that I currently store in JSON files for templating display.

I was wondering what would be the most straightforward (recommended) approach to use these data for rendering “partial” components within the `index.hbs` page.

Some of the ideas I’ve had so far:

1. Load static JSON file from `assets`.
2. Generate the content via JS script.
3. Create a set of posts containing formatted data and load them by a specific tag.

I’m just starting with Ghost, thus I appreciate any feedback and additional thoughts.

---

<div class="post-metadata">

**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\
**Post date:** [July 25, 2019, 9:13am UTC](https://forum.ghost.org/t/working-with-static-data/8409/2 "2019-07-25T09:13:19Z")

</div>

Hey! This sounds really interesting. Do you have an example of this? Sorry but I’m just trying to get a better picture in my mind of what you’re trying to do

---

<div class="post-metadata">

**Author:** ![Kevin](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/kevin/32/32_2.png) [@Kevin](https://forum.ghost.org/u/Kevin)\
**Post date:** [July 25, 2019, 10:53am UTC](https://forum.ghost.org/t/working-with-static-data/8409/3 "2019-07-25T10:53:39Z")

</div>

> 1. Load static JSON file from `assets` .

FYI `*.json` files (except `manifest.json`) are blacklisted and won’t be served as static assets from the theme - you’d need to store those files externally or give them a different extension.

---

<div class="post-metadata">

**Author:** ![giacomosilli](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/giacomosilli/32/3403_2.png) [@giacomosilli](https://forum.ghost.org/u/giacomosilli)\
**Post date:** [July 25, 2019, 12:47pm UTC](https://forum.ghost.org/t/working-with-static-data/8409/4 "2019-07-25T12:47:33Z")

</div>

> [@Kevin](#):
>
> FYI `*.json` files (except `manifest.json` ) are blacklisted and won’t be served as static assets from the theme - you’d need to store those files externally or give them a different extension.

Why are json blacklisted?

---

<div class="post-metadata">

**Author:** ![vzelenko](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/vzelenko/32/4160_2.png) [@vzelenko](https://forum.ghost.org/u/vzelenko)\
**Post date:** [July 25, 2019, 1:08pm UTC](https://forum.ghost.org/t/working-with-static-data/8409/5 "2019-07-25T13:08:20Z")

</div>

Kevin, is there an example of how to load static Json file? Ajax?

---

<div class="post-metadata">

**Author:** ![Kevin](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/kevin/32/32_2.png) [@Kevin](https://forum.ghost.org/u/Kevin)\
**Post date:** [July 25, 2019, 2:03pm UTC](https://forum.ghost.org/t/working-with-static-data/8409/6 "2019-07-25T14:03:07Z")

</div>

> [@giacomosilli](#):
>
> Why are json blacklisted?

For security. There were instances of private config being exposed unintentionally through build-time config files and `package.json` contents.

> [@vzelenko](#):
>
> Kevin, is there an example of how to load static Json file? Ajax?

No specific example, any `ajax` tutorial would work because it’s only possible to use a static file client-side.

---

<div class="post-metadata">

**Author:** ![vzelenko](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/vzelenko/32/4160_2.png) [@vzelenko](https://forum.ghost.org/u/vzelenko)\
**Post date:** [July 25, 2019, 2:51pm UTC](https://forum.ghost.org/t/working-with-static-data/8409/7 "2019-07-25T14:51:28Z")

</div>

@Kevin - thank you. I’m not actually asking for an example of writing an AJAX in JS, I am just not sure how to connect it to Ghost specific API/functions and how to feed the data to Handlebars later. I’m trying to do this inside a custom theme template.

So, given this:

```auto
<script>
   var records = [
       {name: "Rec 1"},
       {name: "Rec 2"}
   ];
</script>

```

How do I use `data` in `foreach` thus?

```auto
<ul>
{{#foreach records}}
  <li>{{name}}</li>
{{/foreach}}
</ul>

```

---

<div class="post-metadata">

**Author:** ![Kevin](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/kevin/32/32_2.png) [@Kevin](https://forum.ghost.org/u/Kevin)\
**Post date:** [July 25, 2019, 3:03pm UTC](https://forum.ghost.org/t/working-with-static-data/8409/8 "2019-07-25T15:03:44Z")

</div>

> [@vzelenko](#):
>
> I am just not sure how to connect it to Ghost specific API/functions and how to feed the data to Handlebars later.

That’s not possible, if you’re using a static file then it would be accessible at [https://yoursite.com/static-file.js](https://yoursite.com/static-file.js) (remember .json is blacklisted) and you’d use ajax to download it and generate what you need client-side. There’s no access to the file via handlebars.

---

<div class="post-metadata">

**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\
**Post date:** [July 25, 2019, 3:06pm UTC](https://forum.ghost.org/t/working-with-static-data/8409/9 "2019-07-25T15:06:07Z")

</div>

What is it that you’re trying to build out? Could it be done with HTML and JavaScript?

---

<div class="post-metadata">

**Author:** ![vzelenko](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/vzelenko/32/4160_2.png) [@vzelenko](https://forum.ghost.org/u/vzelenko)\
**Post date:** [July 25, 2019, 3:10pm UTC](https://forum.ghost.org/t/working-with-static-data/8409/10 "2019-07-25T15:10:50Z")

</div>

I have structured data in JSON format that I need to display in a list on the Home page.

I come from languages like Ruby (on rails), C# ([asp.net](http://asp.net)), and JS (express, etc.) which all allow me to feed the data into template and display however I want using partials.

It looks like Ghost themes support this as well.

All I want to do is take data Array (either as Stringified JSON or JS object) and iterate over it with `{{#foreach}}` loop, data being NOT one of Ghost standard Contexts.

---

<div class="post-metadata">

**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\
**Post date:** [July 25, 2019, 3:40pm UTC](https://forum.ghost.org/t/working-with-static-data/8409/11 "2019-07-25T15:40:32Z")

</div>

As Kevin said, it’s not possible to upload `.json` files. But even if you were able to, the Handlebars theme logic is not designed to iterate over arbitrary files. Could this be done static HTML? You could generate the HTML beforehand and then add it to a HTML card within the page content?

The alternative is to switch to an API driven statically generated site, there you could iterate over any files you wish as the code would be running outside of Ghost:

> **[Ghost on the JAMstack](https://ghost.org/changelog/jamstack/)**
>
> After some major updates to Ghost's public API and tooling, it's now possible to use Ghost as a completely decoupled headless CMS 👉

[https://ghost.org/docs/api/v2/content/](https://ghost.org/docs/api/v2/content/)

---

<div class="post-metadata">

**Author:** ![vzelenko](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/vzelenko/32/4160_2.png) [@vzelenko](https://forum.ghost.org/u/vzelenko)\
**Post date:** [July 25, 2019, 3:42pm UTC](https://forum.ghost.org/t/working-with-static-data/8409/12 "2019-07-25T15:42:55Z")

</div>

> Blockquote[quote=“DavidDarnes, post:11, topic:8409”]  
> As Kevin said, it’s not possible to upload `.json` files.  
> [/quote]

I am NOT trying to “UPLOAD” anything. Forget JSON files.

Is there any way to Set a variable to whatever I want and use it inside Handlebars template or not?

---

<div class="post-metadata">

**Author:** ![vikaspotluri123](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/vikaspotluri123/32/24_2.png) [@vikaspotluri123](https://forum.ghost.org/u/vikaspotluri123)\
**Post date:** [July 26, 2019, 2:07am UTC](https://forum.ghost.org/t/working-with-static-data/8409/13 "2019-07-26T02:07:36Z")

</div>

> [@DavidDarnes](#):
>
> But even if you were able to, the Handlebars theme logic is not designed to iterate over arbitrary files

Expanding on this, Ghost themes are generally used to display content created by the Ghost instance. You can include static pages or hard-coded values, but you can’t pull in data from external sources (including your theme)

To answer your question, no, you cannot just “set a variable” in your handlebars theme. As David mentioned, you can generate the content before hand as part of your build system. If your data changes too much, Ghost also works really well as a headless CMS.

---

<div class="post-metadata">

**Author:** ![vzelenko](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/vzelenko/32/4160_2.png) [@vzelenko](https://forum.ghost.org/u/vzelenko)\
**Post date:** [July 26, 2019, 3:08am UTC](https://forum.ghost.org/t/working-with-static-data/8409/14 "2019-07-26T03:08:38Z")

</div>

@vikaspotluri123 - thank you. I think that clarifies things (and the other answers beging to make more sense to me.) I suppose my wish is to use plugin (or theme) to expand Ghost’s scope and that’s my error. I indeed do appreciate a tool that does one job really well. 🙂
