<p>You'll simply need to decode the JSON string. Unfortunately, Twig doesn't ship with a <code>json_decode</code> filter, but there's <a href="https://github.com/diit/Json-Decode-Twig" rel="nofollow noreferrer">a plugin</a>. </p>

<p>Here's how you'd use it:</p>

<pre><code>&lt;ul&gt;
{% for block in entry.gridcontrol|json_decode %}
  {% set entry = craft.entries.id(block.id) %}
  &lt;li class="{{ block.classes }}" style="left:{{ block.x }}%"&gt;
    {{ entry.title }}
  &lt;/li&gt;
{% endfor %}
&lt;ul&gt;
</code></pre>

CC BY-SA 3.0
2017-01-05T00:51:53.103Z
Perfect, this worked wonderfully. Thanks for the tip.
Rob Erskine
CC BY-SA 4.0
2024-08-04T20:38:40.167Z
There is now a native json_decode filter in Craft CMS.
James White
CC BY-SA 3.0
2017-01-04T13:52:39.313Z
2017-01-05T22:18:28.873Z
2017-01-05T22:18:28.873Z
Mats Mikkel Rummelhoff
<p>I've written a custom plugin that stores data as <code>JSON</code> in a <code>TEXT</code> column (<code>field_gridcontrol</code>) in Craft's content table that looks something like this:</p>

<pre><code>[
  {
    "id": "35", // id is an element's id
    "classes": "item w1 h2", // classes to add to the dom element
    "x": 0 // x coordinate on where it shows up in a grid
  },
  {
    "id": "56",
    "classes": "item w2 h2",
    "x": 0.25
  },
  {
    "id": "24",
    "classes": "item w1 h1",
    "x": 0.75
  }
]
</code></pre>

<p>I can print this as a string <code>{{entry.fieldcontrol}}</code>, which is all well and good, but I'd like to be able to loop through it as an object like a traditional <a href="https://craftcms.com/docs/templating/elementcriteriamodel" rel="nofollow noreferrer">element criteria model</a>:</p>

<pre><code>&lt;ul&gt;
{% for block in entry.gridcontrol %}
  {% set entry = craft.entries.id(block.id) %}
  &lt;li class="{{block.classes}}" style="left:{{block.x}}%"&gt;
    {{entry.title}}
  &lt;/li&gt;
{% endfor %}
&lt;ul&gt;
</code></pre>

<p>However when I try this I don't get any errors, just an empty <code>ul</code>. I guess this is because it's not seeing gridcontrol as an object. </p>

<p>My question is: Did I go about structuring this the wrong way? I've seen other plugins, like <a href="https://github.com/nystudio107/seomatic" rel="nofollow noreferrer">nystudio107's SEOmatic</a>, <a href="https://cl.ly/2S2v06332k0n/Screen%20Shot%202017-01-04%20at%208.43.59%20AM.jpg" rel="nofollow noreferrer">that store data this way</a>. Or am I missing something super silly to get this up and running?</p>

<plugin-development><templating><json>
Loop through JSON object in Twig from the database
# Loop through JSON object in Twig from the database

(Asked by: username_0 on 2017-01-04)

I've written a custom plugin that stores data as JSON in a TEXT column (field_gridcontrol) in Craft's content table that looks something like this:
[
  {
    "id": "35", // id is an element's id
    "classes": "item w1 h2", // classes to add to the dom element
    "x": 0 // x coordinate on where it shows up in a grid
  },
  {
    "id": "56",
    "classes": "item w2 h2",
    "x": 0.25
  },
  {
    "id": "24",
    "classes": "item w1 h1",
    "x": 0.75
  }
]

I can print this as a string {{entry.fieldcontrol}}, which is all well and good, but I'd like to be able to loop through it as an object like a traditional element criteria model:

{% for block in entry.gridcontrol %}
  {% set entry = craft.entries.id(block.id) %}
  
    {{entry.title}}
  
{% endfor %}


However when I try this I don't get any errors, just an empty ul. I guess this is because it's not seeing gridcontrol as an object. 
My question is: Did I go about structuring this the wrong way? I've seen other plugins, like nystudio107's SEOmatic, that store data this way. Or am I missing something super silly to get this up and running?

**Tags:** plugin-development, templating, json


---

## 1 answers

### Answer by username_1 on 2017-01-04. Score: 3 | Accepted answer

You'll simply need to decode the JSON string. Unfortunately, Twig doesn't ship with a json_decode filter, but there's a plugin. 
Here's how you'd use it:

{% for block in entry.gridcontrol|json_decode %}
  {% set entry = craft.entries.id(block.id) %}
  
    {{ entry.title }}
  
{% endfor %}

> **Comments:**
> **username_0**: Perfect, this worked wonderfully. Thanks for the tip.  
> **username_2**: There is now a native json_decode filter in Craft CMS.  

---

