How to access objects in Jekyll array?

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.