title: How to access objects in Jekyll array?
body: <p>My Jekyll page code is as following (<em>simplified</em>):</p>
  
  <p><strong>_layouts/content.html:</strong> </p>
  
  <pre><code>---
  layout: null
  ---
  &lt;pre&gt;
      {{ content }}
  &lt;/pre&gt;
  </code></pre>
  
  <p><strong>any_page.md</strong></p>
  
  <pre><code>---
  layout: content
  social:
      - twitter :
          url : "https://twitter.com"
          user : "foo"
          show : true
      - instagram : 
          url : "https://instagram.com"
          user : "bar"
          show : false
  ---
  </code></pre>
  
  <p>My understanding of above in any_page.md is  </p>
  
  <ul>
  <li><code>social</code> is an <code>array</code> of objects having items 0, 1; <code>social[0]</code> equals to * <code>twitter</code>. These keys can be variable.</li>
  <li>each array item in above array is <code>social[i]</code>; an object having similar known keys (url, user, show)</li>
  </ul>
  
  <p><strong>Problem:</strong></p>
  
  <p>How to access page.social[i]["url"] &amp; other two known keys?<br>
  How to access these known keys of an object residing in a variable-length array?<br>
  How to get the following outputs: <code>twitter</code>, <code>https://twitter.com</code>, <code>foo</code>, <code>true</code></p>
  
  <p><strong>Code I have tried:</strong></p>
  
  <p>all social array: <code>{{ page.social }}</code> outputs <em>(as expected)</em></p>
  
  <pre><code>  {“twitter”=&gt;
      { “url”=&gt;”https://twitter.com”,
        “user”=&gt;”foo”,
        “show”=&gt;true
      }
    }
    {“instagram”=&gt;
      { “url”=&gt;”https://instagram.com”,
        “user”=&gt;”bar”,
        “show”=&gt;false
      }
    }
  </code></pre>
  
  <p>social array's first object: <code>{{ page.social[0] }}</code> outputs <em>(as expected)</em></p>
  
  <pre><code>{“twitter”=&gt;
      { “url”=&gt;”https://twitter.com”,
        “user”=&gt;”foo”,
        “show”=&gt;true
      }
    }
  </code></pre>
  
  <p>Failed attempts to access <code>url</code> of item 01 (all results to empty):</p>
  
  <pre><code>{{ page.social[0]["url"] }}  
  {{ page.social[0][url] }}  
  {{ page.social[0]."url" }}  
  {{ page.social[0].url }}  
  {{ page.social[0][0] }}  
  </code></pre>
  
  <p>Addendum:</p>
  
  <p>I have also tried the for loop; &amp; it gives all the values on root level (twitter etc..), but no access to the object keys:</p>
  
  <pre><code>{% for item in page.social %}  
      item = {{ item }}                # works
      item[URL] = {{ item[url] }}      # empty
      item["URL"] = {{ item["url"] }}  # empty
      item."URL" = {{ item."url" }}    # empty
      item.URL = {{ item.url }}        # empty
      i = {{forloop.index }}           # ok, but starts from 1 instead of 0
  {% endfor %}  
  </code></pre>