How to access objects in Jekyll array? - arrays

Question

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

Answer 1

This will work:
twitter key: {{page.social[0]|first|first}}
<h2>data</h2>
url: {{page.social[0]['twitter'].url}}
user: {{page.social[0]['twitter'].user}}
show: {{page.social[0]['twitter'].show}}
Another approach
social:
twitter :
url : "https://twitter.com"
user : "foo"
show : true
instagram :
url : "https://instagram.com"
user : "bar"
show : false
Then you can access it with:
{% for item in page.social%}
key: {{item[0]}}<br>
{% endfor %}
<hr>
<h2>data</h2>
url: {{page.social['twitter'].url}}
user: {{page.social['twitter'].user}}
show: {{page.social['twitter'].show}}

Answer 2

I have accepted marcanuy's answer, here I am just documenting what I used based on his answer;
{% for item in page.social %} # OUTPUT for 1st item
{{ item[0] }} # twitter:
{{ item[1].url }} # https://twitter.com
{{ item[1].user }} # foo
{{ item[1].show }} # true
{% endfor %}
Also, the declaration in front matter is bit changed. The one which works with above code is:
social:
twitter :
url : "https://twitter.com"
user : "foo"
show : true
instagram :
url : "https://instagram.com"
user : "bar"
show : false
Note the missing - dashes. Although both ways are correct, I need to read more to how to access both.
As mentioned at http://yaml.org/spec/1.2/spec.html, indentations & - matter. Each item having more spaces than earlier makes itself child of earlier.