Error: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

[danielLee0721]

What I am trying to do is make an index page showing a list of links to all pages with a certain tag
So if I have a number of pages with the tag
tags: ['face'];
and variable
pageName: something

and then on my page I do

---
layout: index-list-page.html
type: face
---

and on the 'index-list-page' layout page I do

---
layout: default.html
---
<div class="container">
  <ul class="index-list">
    {%- assign indexList = collections['type'] -%}
    {%- for i in indexList -%}
    <li>{{ i.url }}</li>
    {%- endfor -%}
  </ul>
</div>
{{ content }}

everything works fine but when I try the above while using my custom filter

{%- assign indexList = collections['type'] | sortByAlph -%}

eleventyConfig.addFilter("soryByAlph", function(values) {
 let vals = [...values];
    return vals.sort(function (a, b) {
      let nameA = a.data.pageName?.toUpperCase();
      let nameB = b.data.pageName?.toUpperCase();
      if (nameA < nameB) return -1;
      else if (nameA > nameB) return 1;
      else return 0;
});

I get the following error
"undefined is not iterable (cannot read property Symbol(Symbol.iterator))"

Am I missing something?

Thank you

[pdehaan]

Off the top of my head, I wonder if it's possibly just a typo (sortByAlph vs soryByAlph in your code above):

{%- assign indexList = collections['type'] | sortByAlph -%}

versus

// Should this be "sortByAlph"?
eleventyConfig.addFilter("soryByAlph"

Or, possibly the "undefined is not iterable" is referring to the collections['type'] returning undefined (unneeded single quotes around that type variable) causing the result to be undefined and then trying to call .sort() on an undefined object...

{%- assign indexList = collections['type'] | sortByAlph -%}

You might need an additional check to see if vals is an array before trying to call .sort(). I'd have to test it out locally to see what you get if you try and do a [...undefined] (empty array, vs something else).

[danielLee0721]

Thank you for your reply and the suggestions.

I just checked and

1. I didn't have the typo in the actual code so that one is ✅
2. I didn't have the ' ' around the variable so that one is also ✅

I noticed that if I just run the filter when directly referencing the collections and not passing in the variable then it works fine 🧐
So below works just fine.

{%- assign indexList = collections.face | sortByAlph -%}
{%- for i in indexList -%}
{{ i.url }}
{%- endfor -%}

You might need an additional check to see if vals is an array before trying to call .sort(). I'd have to test it out locally to see what you get if you try and do a [...undefined] (empty array, vs something else).

What do you mean by this?

Thanks again for your help.

[pdehaan]

Oh interesting. I wouldn't have thought collections[type] would fail but collections.face would work. Suspicious.

I'd also try debugging what indexList looks like. If that is returning undefined or something else unexpected it could be the cause of issues.

re: additional checks,
I just meant maybe something like this... If values isn't an array, just abort early and maybe log an error message.

eleventyConfig.addFilter("sortByAlph", function(values) {
    if (!Array.isArray(values)) {
      console.error(`Unexpected values in "sortByAlph" filter: ${values}`);
      return [];
    }
    let vals = [...values]; 
    return vals.sort(function (a, b) {
      let nameA = a.data.pageName?.toUpperCase();
      let nameB = b.data.pageName?.toUpperCase();
      if (nameA < nameB) return -1;
      else if (nameA > nameB) return 1;
      else return 0;
});

I tried this in the Node v14.16.1 REPL and got a very similar looking error message:

> [...undefined]

Uncaught:
  TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

If you have a public repo somewhere I can take a quick look. Otherwise it might take me a bit longer to try and create a similar looking sample repo and see if I can reproduce locally.

[pdehaan]

This works for me:

---
title: HOME
permalink: /
collectionName: posts
---

{%- assign indexList = collections[collectionName] | sortByAlph -%}

<h1>Posts</h1>
<ol>
{%- for i in indexList -%}
  <li><a href="{{ i.url | url }}" data-page-name="{{ i.data.pageName }}">{{ i.data.title }}</a></li>
{%- else -%}
  <li>No posts found.</li>
{%- endfor -%}
</ol>

Where my .eleventy.js sortByAlph filter looks like:

eleventyConfig.addFilter("sortByAlph", function(values) {
  if (!values || !Array.isArray(values)) {
    console.error(`Unexpected values in "sortByAlph" filter: ${values}`);
    return [];
  }
  let vals = [...values];
  return vals.sort(function (a, b) {
    let nameA = a.data.pageName?.toUpperCase();
    let nameB = b.data.pageName?.toUpperCase();
    return String(nameA).localeCompare(nameB);
  });
});

And my output looks like:

<h1>Posts</h1>
<ol>
  <li><a href="/posts/4/" data-page-name="Four">Post Four</a></li>
  <li><a href="/posts/1/" data-page-name="One">Post One</a></li>
  <li><a href="/posts/2/" data-page-name="Two">Post Two</a></li>
  <li><a href="/posts/3/" data-page-name="">Post Three</a></li>
</ol>

If I pass an invalid collection name, it outputs:

<h1>Posts</h1>
<ol><li>No posts found.</li></ol>

[danielLee0721]

I figured it out! 😎

While I was preparing a dumbed down version of a public repo for you, I realized a few of the pages using the index-list-page.html layout were missing the pageName variable in the front matter.

Thank you so much for looking into this for me. I learned this trick from you 😀

  if (!values || !Array.isArray(values)) {
    console.error(`Unexpected values in "sortByAlph" filter: ${values}`);
    return [];
  }