Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-05T00:51:53.103Z
Answers.Text: Perfect, this worked wonderfully. Thanks for the tip.
Answers.UserDisplayName: Rob Erskine
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-08-04T20:38:40.167Z
Answers.Text: There is now a native json_decode filter in Craft CMS.
Answers.UserDisplayName: James White
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-04T13:52:39.313Z
Answers.LastActivityDate: 2017-01-05T22:18:28.873Z
Answers.LastEditDate: 2017-01-05T22:18:28.873Z
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Body: <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>
  
Tags: <plugin-development><templating><json>
Title: Loop through JSON object in Twig from the database
ThreadText: # 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](https://craftcms.com/docs/templating/elementcriteriamodel):
  
  ```
  <ul>
  {% for block in entry.gridcontrol %}
    {% set entry = craft.entries.id(block.id) %}
    <li class="{{block.classes}}" style="left:{{block.x}}%">
      {{entry.title}}
    </li>
  {% endfor %}
  <ul>
  
  ```
  
  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](https://github.com/nystudio107/seomatic), [that store data this way](https://cl.ly/2S2v06332k0n/Screen%20Shot%202017-01-04%20at%208.43.59%20AM.jpg). 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](https://github.com/diit/Json-Decode-Twig).
  
  Here's how you'd use it:
  
  ```
  <ul>
  {% for block in entry.gridcontrol|json_decode %}
    {% set entry = craft.entries.id(block.id) %}
    <li class="{{ block.classes }}" style="left:{{ block.x }}%">
      {{ entry.title }}
    </li>
  {% endfor %}
  <ul>
  
  ```
  
  > **Comments:**
  > **username_0**: Perfect, this worked wonderfully. Thanks for the tip.  
  > **username_2**: There is now a native json_decode filter in Craft CMS.  
  
  ---
  
  