How to sort a nested array?

I have an .yml like this

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?

B:
 - a:2
 - b:1

A:
  - a:1
  - b:2

Thanks.

You mean nested hashes not arrays.

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

- 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.

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

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

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ā€¦

||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 %}

Thanks sorry I missed your answer. Iā€™ll try your data with sorting

@MichaelCurrin No big deal :slight_smile: Thank you

What you ask for is not supported in Jekyll

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

See

Issue

Linked PR which was closed

So update your data like this:

- 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

{% 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.

1 Like

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.

<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

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

#authors {
        column-width: 100px;
}

https://www.w3schools.com/cssref/css3_pr_column-width.asp

1 Like