# How to sort a nested array?

**URL:** <https://talk.jekyllrb.com/t/how-to-sort-a-nested-array/4134>\
**Category:** Uncategorized\
**Created:** [March 26, 2020, 9:08am UTC](https://talk.jekyllrb.com/t/how-to-sort-a-nested-array/4134 "2020-03-26T09:08:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![fdq09eca](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/fdq09eca/32/2520_2.png) [@fdq09eca](https://talk.jekyllrb.com/u/fdq09eca)\
**Post date:** [March 26, 2020, 9:08am UTC](https://talk.jekyllrb.com/t/how-to-sort-a-nested-array/4134/1 "2020-03-26T09:08:44Z")

</div>

I have an `.yml` like this

```auto
A:
  - a:1
  - b:2
B:
 - a:2
 - b:1

```

how to use liquid `forloop` sort this file by `a` or `b`? such that i could have the following?

```auto
B:
 - a:2
 - b:1

A:
  - a:1
  - b:2

```

Thanks.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [March 26, 2020, 9:26pm UTC](https://talk.jekyllrb.com/t/how-to-sort-a-nested-array/4134/2 "2020-03-26T21:26:39Z")

</div>

You mean nested hashes not arrays.

You could rewrite your data with a fixed order using arrays.

```auto
- name: A
  values:
   - a: 2
   - b: 1
- name: B
  ...

```

Then you can iterate over the outer level, then iterate over the items in values. You can use the `reversed` filter. Or just fix your data to be in that reversed order, though I understand you might want to only reverse sometimes so the filter is good for that.

If you keep your data structure as is, you’ll have to apply `sort` filter on A, B keys.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [March 26, 2020, 9:30pm UTC](https://talk.jekyllrb.com/t/how-to-sort-a-nested-array/4134/3 "2020-03-26T21:30:12Z")

</div>

Can you provide any existing code to make it easier to help? Just getting for loop right an array or unpacking keys and values is enough of a question by itself and I can’t tell how far you got with that. Sorting and reversing would be second level of complexity

---

<div class="post-metadata">

**Author:** ![fdq09eca](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/fdq09eca/32/2520_2.png) [@fdq09eca](https://talk.jekyllrb.com/u/fdq09eca)\
**Post date:** [March 26, 2020, 11:05pm UTC](https://talk.jekyllrb.com/t/how-to-sort-a-nested-array/4134/5 "2020-03-26T23:05:47Z")

</div>

I would like to sort the following `authors.yml` by their `bio`

```auto
Travis Ng:
  name: "Prof. Travis K. H. Ng "
  bio: "Director"
  avatar: "/assets/images/people/NG_Ka_Ho_Travis.png"
  links:
    - label: "travisng@cuhk.edu.hk"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:travisng@cuhk.edu.hk"
    - label: "Official Website"
      icon: "fas fa-fw fa-link"
      url: "http://www.econ.cuhk.edu.hk/econ/en-gb/people/faculty?view=faculty&id=khng"
    - label: "(852) 3943 8184"
      icon: "fas fa-phone"
      url: "tel:+85239438184"

Liu Pak Wai:
  name: "Prof. Pak-wai Lui"
  bio: "Co-Director"
  avatar: "/assets/images/people/LiuPW.jpg"
  links:
    - label: "pakwailiu@cuhk.edu.hk"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:pakwailiu@cuhk.edu.hk"
    - label: "Official Website"
      icon: "fas fa-fw fa-link"
      url: "http://www.econ.cuhk.edu.hk/econ/en-gb/people/faculty?view=faculty&id=pwliu"
    - label: "(852) 3943 1616"
      icon: "fas fa-phone"
      url: "tel:+85239431616"

Sheng Liugang:
  name: "Prof Liu-gang Sheng"
  bio: "Associate Director"
  avatar: "/assets/images/people/ShengLiugang.jpg"
  links:
    - label: "lsheng@cuhk.edu.hk"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:lsheng@cuhk.edu.hk"
    - label: "Official Website"
      icon: "fas fa-fw fa-link"
      url: "http://www.econ.cuhk.edu.hk/econ/en-gb/people/faculty?view=faculty&id=lgsheng"
    - label: "(852) 3943 8231"
      icon: "fas fa-phone"
      url: "tel:+85239438231"

Prof Sung:
  name: "Prof. Yun-wing Sung"
  bio: "Associate Director"
  avatar: "/assets/images/people/SUNG_Yun_Wing.jpg"
  links:
    - label: "ywsung@cuhk.edu.hk"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:ywsung@cuhk.edu.hk"
    - label: "Official Website"
      icon: "fas fa-fw fa-link"
      url: "http://www.econ.cuhk.edu.hk/econ/en-gb/people/faculty?view=faculty&id=ywsung"
    - label: "(852) 3943 8777"
      icon: "fas fa-phone"
      url: "tel:+85239438777"

Michael Fung:
  name: "Prof. Michael K. Y. Fung"
  bio: "Member"
  avatar: "https://www.bschool.cuhk.edu.hk/wp-content/uploads/Fung-Ka-Yiu-Michael-DSE-e1520847232243-300x300.jpg"
  links:
    - label: "michael@baf.msmail.cuhk.edu.hk"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:michael@baf.msmail.cuhk.edu.hk"
    - label: "Official Website"
      icon: "fas fa-fw fa-link"
      url: "https://www.bschool.cuhk.edu.hk/staff/fung-michael-ka-yiu/"
    - label: "(852) 3943 8184"
      icon: "fas fa-phone"
      url: "tel:+85239438184"

Chong Tai Leung:
  name: "Prof. Terence T. L. Chong"
  bio: "Member"
  avatar: "/assets/images/people/ChongTL.jpg"
  links:
    - label: "chong2064@cuhk.edu.hk"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:chong2064@cuhk.edu.hk"
    - label: "Official Website"
      icon: "fas fa-fw fa-link"
      url: "http://www.cuhk.edu.hk/eco/staff/tlchong/tlchong3.htm"
    - label: "(852) 3943 1622"
      icon: "fas fa-phone"
      url: "tel:+85239431622"

Wallace Mok:
  name: "Dr. Wallace K. C. Mok"
  bio: "Member"
  avatar: "/assets/images/people/WallaceMok.jpg"
  links:
    - label: "wallacemok@cuhk.edu.hk"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:wallacemok@cuhk.edu.hk"
    - label: "Official Website"
      icon: "fas fa-fw fa-link"
      url: "http://www.econ.cuhk.edu.hk/econ/en-gb/people/faculty?view=faculty&id=kcmok"
    - label: "(852) 3943 8003"
      icon: "fas fa-phone"
      url: "tel:+85239438003"

Vinci Chow:
  name: "Dr. Vinci Y. C. Chow"
  bio: "Member"
  avatar: "/assets/images/people/VinciChow.jpg"
  links:
    - label: "vincichow@cuhk.edu.hk"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:vincichow@cuhk.edu.hk"
    - label: "Official Website"
      icon: "fas fa-fw fa-link"
      url: "http://www.econ.cuhk.edu.hk/econ/en-gb/people/faculty?view=faculty&id=ycchow"
    - label: "(852) 3943 4059"
      icon: "fas fa-phone"
      url: "tel+85239434059"

Andrew Yuen:
  name: "Dr. Andrew C. L. Yuen "
  bio: "Member"
  avatar: "/assets/images/people/AndrewYuen.jpg"
  links:
    - label: "andrewyuen@baf.cuhk.edu.hk"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:andrewyuen@baf.cuhk.edu.hk"
    - label: "Official Website"
      icon: "fas fa-fw fa-link"
      url: "https://www.bschool.cuhk.edu.hk/staff/yuen-andrew-chi-lok/"
    - label: "(852) 3943 1968"
      icon: "fas fa-phone"
      url: "tel+85239431968"

Fred Ku:
  name: "Dr. Fred K. T. Ku "
  bio: "Member"
  avatar: "/assets/images/people/FredKu.jpg"
  links:
    - label: "fredku@baf.cuhk.edu.hk"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:fredku@baf.cuhk.edu.hk"
    - label: "Official Website"
      icon: "fas fa-fw fa-link"
      url: "https://www.bschool.cuhk.edu.hk/staff/ku-fred-kei-tat/"
    - label: "(852) 3943 1686"
      icon: "fas fa-phone"
      url: "tel+85239431686"

CK Law:
  name: "Dr Cheung-kwok Law"
  bio: "Senior Advisor"
  avatar: "http://www.cuhk.edu.hk/hkiaps/policy_research/imgs/people/Law_ck.jpg"
  links:
    - label: "cheungkwok.law@cuhk.edu.hk"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:cheungkwok.law@cuhk.edu.hk"
    - label: "Official Website"
      icon: "fas fa-fw fa-link"
      url: "http://www.cuhk.edu.hk/hkiaps/policy_research/people_law_ck.html"
    - label: "(852) 3943 1397"
      icon: "fas fa-phone"
      url: "tel:+85239431397"

```

here is the markdown table I tried, but obviously it was not sorted…

```markdown
||Name|Position

:--:|:--:|:--:

{% for people in site.data.authors %}

{%- assign person = people[1] -%}

<img src="{{person.avatar}}" alt="this is a placeholder image" width="80px" height="80px" style="border-radius: 10%;">|[{{ person.name }}](person.links[1].url)|{{ person.bio }}

{% endfor %}

```

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [May 15, 2020, 7:51am UTC](https://talk.jekyllrb.com/t/how-to-sort-a-nested-array/4134/6 "2020-05-15T07:51:24Z")

</div>

Thanks sorry I missed your answer. I’ll try your data with sorting

---

<div class="post-metadata">

**Author:** ![fdq09eca](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/fdq09eca/32/2520_2.png) [@fdq09eca](https://talk.jekyllrb.com/u/fdq09eca)\
**Post date:** [May 18, 2020, 8:38am UTC](https://talk.jekyllrb.com/t/how-to-sort-a-nested-array/4134/7 "2020-05-18T08:38:08Z")

</div>

@MichaelCurrin No big deal 🙂 Thank you

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [May 21, 2020, 9:30am UTC](https://talk.jekyllrb.com/t/how-to-sort-a-nested-array/4134/8 "2020-05-21T09:30:48Z")

</div>

What you ask for is not supported in Jekyll

```auto
{% assign sorted_posts = filtered_posts | sort: 'book.author' %}

```

See

Issue

> <https://github.com/jekyll/jekyll/issues/3351>
>
> Hi all,
> I found a strange behavior sorting posts using a custom nested property as sorting key.
> My Front Matter is the following:
> \---
> layout:...

Linked PR which was closed

> <https://github.com/Shopify/liquid/pull/604>

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [May 21, 2020, 9:33am UTC](https://talk.jekyllrb.com/t/how-to-sort-a-nested-array/4134/9 "2020-05-21T09:33:21Z")

</div>

So update your data like this:

```auto
- title: Travis Ng
  name: "Prof. Travis K. H. Ng "
  bio: "Director"
  avatar: "/assets/images/people/NG_Ka_Ho_Travis.png"
  links:
    - label: "travisng@cuhk.edu.hk"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:travisng@cuhk.edu.hk"
    - label: "Official Website"
      icon: "fas fa-fw fa-link"
      url: "http://www.econ.cuhk.edu.hk/econ/en-gb/people/faculty?view=faculty&id=khng"
    - label: "(852) 3943 8184"
      icon: "fas fa-phone"
      url: "tel:+85239438184"

- title: Liu Pak Wai
  name: "Prof. Pak-wai Lui"
  bio: "Co-Director"
  avatar: "/assets/images/people/LiuPW.jpg"
  links:
    - label: "pakwailiu@cuhk.edu.hk"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:pakwailiu@cuhk.edu.hk"
    - label: "Official Website"
      icon: "fas fa-fw fa-link"
      url: "http://www.econ.cuhk.edu.hk/econ/en-gb/people/faculty?view=faculty&id=pwliu"
    - label: "(852) 3943 1616"
      icon: "fas fa-phone"
      url: "tel:+85239431616"

```

Then do this

```auto
{% assign authors = site.data.authors | sort: 'bio' %}

{% for row in authors %}
{{ row.bio }} - {{ row.name }}
{% endfor %}

```

Otherwise you need to create a new array from your hash and sort that. But then you’ll have to use `push` filter or add a plugin to get values. And its much simpler just to update your data structure.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [May 21, 2020, 9:45am UTC](https://talk.jekyllrb.com/t/how-to-sort-a-nested-array/4134/10 "2020-05-21T09:45:35Z")

</div>

Regarding rendering of your table - avoid mixing markdown and HTML - especially for a table.  
It’s hard to read and debug especially since a line break in a table field will break the table.

Rather go for all HTML solution in your markdown file. This works against the data I posted above.

```auto
<table>
    {% for row in site.data.authors %}
    {% if forloop.first %}
    <tr>
        <th>Name</th>
        <th>Bio</th>
    </tr>
    {% endif %}

    <tr>
        <td>
            {{ row.name }}
        </td>
        <td>
            {{ row.bio }}
        </td>
    </tr>
    {% endfor %}
</table>

```

I added a tutorial here which deals with CSV data

> **[Tabulate CSV Data](https://jekyllrb.com/tutorials/csv-to-table/#add-table-data-rows)**
>
> This tutorial shows how to use Jekyll to read a CSV and render the data as an HTML table.

And then you can avoid setting inline CSS to by setting styling on the column

```auto
#authors {
        column-width: 100px;
}

```

[https://www.w3schools.com/cssref/css3\_pr\_column-width.asp](https://www.w3schools.com/cssref/css3_pr_column-width.asp)