How to sort a nested array?

fdq09eca · March 26, 2020, 9:08am

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.

MichaelCurrin · March 26, 2020, 9:26pm

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.

MichaelCurrin · March 26, 2020, 9:30pm

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

fdq09eca · March 26, 2020, 11:05pm

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

MichaelCurrin · May 15, 2020, 7:51am

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

fdq09eca · May 18, 2020, 8:38am

@MichaelCurrin No big deal Thank you

MichaelCurrin · May 21, 2020, 9:30am

What you ask for is not supported in Jekyll

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

See

Issue

Linked PR which was closed

MichaelCurrin · May 21, 2020, 9:33am

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.

MichaelCurrin · May 21, 2020, 9:45am

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

Topic		Replies	Views
How to loop through a nested array in liquid syntax Help	1	4290	January 2, 2020
Sorting: How to use Liquid's filter instead of Jekyll's? Help	6	2694	November 16, 2017
Cannot sort a null object in a secondary collection in a data file Help	5	2631	June 18, 2020
My Top 10 Liquid Recipes Share	7	671	March 2, 2023
How to use key-value pairs in data files Help	3	2570	September 27, 2020

How to sort a nested array?

Related topics