Get page.url from pagination item?

[iwm-donath]

Sorry for the lengthy post, tl;dr at the bottom. I'm using pagination to create pages from data (a quiz). On each page I store some information in JavaScript localStorage (the user answers). On the last page I display an overview of all pages (correct answers compared to answers given by the user). The problem here is that the pages in the overview are sorted by data values instead of the default order. Let me explain:

The data structure is like this (frontmatter inside quiz.md):

- title: "The Title"
  survey_results:
    great_worries: 36.2
    some_worries: 45.2
    no_worries: 17.1
- title: "The Title 2"
  survey_results:
    great_worries: 47.2
    some_worries: 32.2
    no_worries: 19.1

On the last page I display all survey results sorted by great_worries (simplified example):

{% for item in pagination.pages | sortByGreatWorries %}
	<p>{{ item.survey_results.great_worries }}</p>
	<p>{{ item.survey_results.some_worries }}</p>
	<p>{{ item.survey_results.no_worries }}</p>
{% endfor %}

My custom filter looks like this in my eleventy.js:

function sortByGreatWorries(values) {
	let vals = [...values];
	return vals.sort((a, b) => Math.sign(a.survey_results.great_worries - b.survey_results.great_worries)).reverse();
}
eleventyConfig.addFilter('sortByGreatWorries', sortByGreatWorries);

Here is my problem: to identify the localStorage key I need some sort of unique id for each page and each result on the last page. I thought of using page.url and that kind of works, but I can't get the page.url in the for loop on the last page. The example in the Eleventy docs uses pagination.hrefs[ loop.index0 ], but that doesn't work because I sort by values (sortByGreatestWorries) and not by default order. Is there some way to get page.url of the item inside the for-loop? A {{ item | dump }} doesn't show anything like that. Or is there any other way to get a unique id of each page? I might use the title, but that kind of seems a bit error prone.

Example: https://github.com/iwm-donath/quiz-test

tl;dr: Is there some way to get page.url for each item inside a "for item in pagination.pages" loop that is not in default order or any other way to uniquely identify a page?

[tannerdolby]

I think you could look into using the before callback which is new in v0.10.0. This would allow you to setup some custom property in each of your quiz pages to more easily identify pages when iterating pagination data.

I assume you have a collection for quiz pages e.g. all the markdown files (page-one.md.. etc) in a directory /quiz. If your paging a collection I think the before callback will allow manipulation on the pagination data object. If your paging an object like the one your referring to that would work in the same fashion.

- title: "The Title"
  survey_results:
    great_worries: 36.2
    some_worries: 45.2
    no_worries: 17.1
- title: "The Title 2"
  survey_results:
    great_worries: 47.2
    some_worries: 32.2

Using before to create a custom key that helps you to identify pages would be a good start. Potentially using .map to remap entries and add a more custom identifier field.

Is there some way to get page.url for each item inside a "for item in pagination.pages" loop that is not in default order or any other way to uniquely identify a page?

You could hack together a URL and assign that value to a new key in pagination data to identify pages using the before callback.

---js
{
  pagination: {
    data: "testdata",
    size: 2,
    before: function(data) {
      return data.map(page => { 
          page['id'] = `some unique identifier`;
      }
    }
  },
  testdata: [
    {
       title: "The Title",
       survey_results: {
          great_worries: 36.2,
          some_worries: 45.2,
          no_worries: 17.1
        }
    },
    {
       title: "The Title 2",
       survey_results : {
          great_worries: 47.2,
          some_worries: 32.2,
          no_worries: 19.1
         }
      }
  ]
}
---

which would map to:

[
  {
       title: "The Title",
       survey_results: {
          great_worries: 36.2,
          some_worries: 45.2,
          no_worries: 17.1
       },
       id: some-identifier
  },
  {
     title: "The Title 2",
     survey_results: {
          great_worries: 47.2,
          some_worries: 32.2,
          no_worries: 19.1
      },
      id: some-identifier
  }
]

This should start you off for one potential solution. If you provide a link to your code or a reproducible example, I'm happy to have another look and provide a more accurate answer. @iwm-donath

[iwm-donath]

Hey, thanks for your reply! The thing is: I would like to automate "some-identifier". I've made a bare bones example of what I did here: https://github.com/iwm-donath/quiz-test
You can see in worry.njk that I use data-id="{{ quiz.title }}" as an identifier for JavaScript. It works, but feels a bit dirty. It could happen that two questions have the same title. Therefore I would like to have an unique identifier. page.url was my original idea, but I can't access that from my pagination loop on the last page (the result).

[tannerdolby]

Hey, your welcome! I'm positive we can figure this out. After forking the example repo you provided and testing things out locally, this is what I've concluded.

The id variable is the custom identifier your looking to replace, it currently has the quiz title but we want something more sturdy.

for (let i = 0; i < worryResult.length; i++) {
    id = worryResult[i].dataset.id; // 'Some title'

The value of id in the for loop is the quiz.title template variable value from your custom data attribute data-id, instead of using quiz.title, we could make an id from the page.url values. Which would make data-id=some-url/1, data-id=some-url/2 etc.

<main data-id="{{ page.url }}">

Each page has a page.url like /quiz/this-is-what-the-region-cares-about/1/ and goes until /quiz/this-is-what-the-region-cares-about/8/ where the ../9/ page is the results page. Using the page number or entire page.url would make much more sense to use as the unique data-id value.

Instead of having worrySelected = localStorage.getItem('worry' + id); which translates to:

<main data-id="I am concerned about the **local supply where I live** (e.g., with food, doctors, pharmacies).">

which I agree, does look quite odd to have such a long string identifier that could be a duplicate like you mentioned. Using a number or page.url like <main data-id="some-url/1"> will be much cleaner and easier to maintain. Note: The pagination.pageNumber value is 1 behind the values from the end of page.url since the pagination array is using zero based indexing,

/quiz/this-is-what-the-region-cares-about/1/ 0
...
/quiz/this-is-what-the-region-cares-about/6/ 5

Your using {% if not quiz.answer_page %} for the data-id="{{ foobar }}" which is being repeated on the next line to check if the page is the answer page or not. Instead of writing the same conditional twice and making it so the <main> on results page doesnt have a data-id attribute, use this and keep the one conditional underneath main, so each page including the results page gets a data-id custom attribute.

<main data-id="{{ page.url }}">
    {% if not quiz.answer_page %}

which would make the final results page <main> look like:

<main data-id="/quiz/this-is-what-the-region-cares-about/9/">

I couldn't find anywhere in {{ item | dump }} where an answer property existed, did you mean answer_page?.

 {% if not item.answer %}
    <div{% if pagination.pageNumber == loop.index0 %} class="worry-progress--filled"{% endif %}></div>
 {% endif %}

If so or if its item.answer thats fine too, then you could check to see if the page is the final one (ie the results page) like this:

{% if not item.answer_page %}
     <div{% if page.url == pagination.href.last %} class="worry-progress--filled"{% endif %}></div>
{% endif %}

Where {{ pagination.href.last }} equals the page.url of the last page in pagination data, the results page /quiz/this-is-what-the-region-cares-about/9/. But remember since this loop over the pagination data is inside {% if not item.answer_page %} the page.url will never equal the last page in pagination data because of this condition since the last page quiz/this-is-what-the-region-cares-about/9/ has answer_page: true.

Now each page including the last page (results) has a more sturdy identifier using page.url. This way the localstorage key is

Therefore instead of using <main data-id="{{ quiz.title }}"> which creates the following localStorage object from localStorage.setItem('worry' + id, i);:

console.log(localStorage);
...
worryI am concerned about **general economic development**.: "2"
worryI am concerned about **social inequality**.: "1"
worryI am concerned about **xenophobia**.: "1"

instead use <main data-id="{{ page.url }}"> without the if condition so then the results page gets a data-id attribute in the HTML and we can compare the page.url to the pagination.href.last value to ensure a page is the last page. This is what the localStorage object looks like with page.url as the unique id value.

worry/quiz/this-is-what-the-region-cares-about/1/: "2"
worry/quiz/this-is-what-the-region-cares-about/2/: "2"

[tannerdolby]

You can see in worry.njk that I use data-id="{{ quiz.title }}" as an identifier for JavaScript. It works, but feels a bit dirty. It could happen that two questions have the same title. Therefore I would like to have an unique identifier.

I wrote a longer comment to your reply here. A shorter and more succinct answer is:

Inside worry.njk replace

<main {% if not quiz.answer_page %}data-id="{{ quiz.title }}"{% endif %}>

with:

<main data-id="{{ page.url }}">

So then each <main> element has a unique data-id custom attribute:

<main data-id="/quiz/this-is-what-the-region-cares-about/1/">
...
<main data-id="/quiz/this-is-what-the-region-cares-about/9/> <!-- Last page -->

This way, without the if statement, every page including the last has a unique identifier like /quiz/this-is-what-the-region-cares-about/1/ etc. Now even if questions have the same title, the page.url will always be unique.

To identify the localStorage key I need some sort of unique id for each page and each result on the last page. I thought of using page.url and that kind of works, but I can't get the page.url in the for loop on the last page.

Now you have a unique identifier for each page including the last using page.url.

Using page.url was my original idea, but I can't access that from my pagination loop on the last page (the result).

This way you can stick with page.url and to access the last page in the pagination loop you can get it with pagination.href.last instead of using if pagination.pageNumber == loop.index0. Updating the conditional statement to look like this:

 <div class="flex-center worry-progress">
    {% for item in pagination.pages %}
        {% if not item.answer %}
            <div{% if page.url == pagination.href.last %} class="worry-progress--filled"{% endif %}></div>
        {% endif %}
    {% endfor %}
</div>

Since the above code is already wrapped in {% if not quiz.answer_page %} and there isn't a key in item called answer we can probably remove that extra condition {% if not item.answer %} and just display the <div class="worry-progress-filled> if the page.url matches the last page (results). But remember the <div class="flex-center worry-progress"> is wrapped in the {% if not quiz.answer_page %} condition so the page.url will never equal pagination.href.last with the current structure.

Hopefully this provides you with a better way of identifying each page and being able to access the last page of pagination data inside a for loop. You can have at look at my fork of your demo if needed. Let me know if this helps answer your question! @iwm-donath

[iwm-donath]

@tannerdolby Wow, thanks a lot for taking so much time to look at my particular problem!

I couldn't find anywhere in {{ item | dump }} where an answer property existed, did you mean answer_page?.

I did indeed, good catch! Also, you are right. In this case using a conditional for pagination.href.last might be a more elegant solution.

I'm afraid we are not quite there yet, but let me explain: Using page.url inside <main> as data-id is a good idea. I tried it myself but couldn't get it to work on the last page (http://localhost:8080/quiz/this-is-what-the-region-cares-about/9/), because when you look at the result bar (I worry about ...), you see that I need an identifier for all the pages that came before the last page for the bar chart. The loop is not in order because of the filter sortByGreatestWorries. Right now I'm using the item.title like this:

<div class="gauge-result-info worry-result-info" data-id="{{ item.title }}">

By using the data-id like this I can highlight the user selection by querying all the ids (worry-result.js):

const worryResult = document.querySelectorAll('.worry-result-info');
for (let i = 0; i < worryResult.length; i++) {
    id = worryResult[i].dataset.id;
    worrySelected = localStorage.getItem('worry' + id);

And then highlight the user selection:

if (worrySelected !== null) {
    let worrySelectedBars = worryResult[i].querySelectorAll('.worry-result-bar');
    for (let j = 0; j < worrySelectedBars.length; j++) {
        if (j === parseInt(worrySelected)) {
            worrySelectedBars[j].style.backgroundImage = 'repeating-linear-gradient(45deg, transparent 0, transparent 4px,rgba(0,0,0,0.2) 4px, rgba(0,0,0,0.2) 8px)';
            worrySelectedBars[j].style.height = '1em';
        }
    }
}

This is my problem: I have no idea how to get the page.url of the pages that came before the result page inside the loop {% for item in pagination.pages | sortByGreatestWorries %} so that I can use them as data-id="{{ item.page.url }}" (doesn't work) instead of data-id="{{ item.title }}"

[tannerdolby]

@iwm-donath No problem! I'm happy to help. After reading your most recent reply, I think we are very close to a solution.

I did indeed, good catch! Also, you are right. In this case using a conditional for pagination.href.last might be a more elegant solution. I'm afraid we are not quite there yet, but let me explain: Using page.url inside <main> as data-id is a good idea.

Ok great! Glad that was helpful! Thank you for making it more clear where the problem still exists. It looks like we need to provide the pages pagination object with access to page.url (or something like it) for all pages including the last, so when you sort with:

{% for item in pagination.pages | sortByGreatestWorries %}

The loop has access to a unique identifier in page.url or a property we add to pages that mimics page.url to use in <div class="gauge-result-info worry-result-info" data-id="{{ item.url }}">.

Fixing things

Keeping page.url in <main data-id={{ page.url }}> looks good so each page has a unique identifier for <main> elements. But your right, we don't have access to each page's page.url further down in worry.njk when we iterate over the pagination.pages data. Using the before callback lets update the data before its fed to pagination so each object in pagination.pages has a url key which holds the same value as page.url would.

The solution will require a url property to be added manually or dynamically at build time so the items in the pages array have access to something similar to page.url in order to supply a value to the custom attribute:

<div class="gauge-result-info worry-result-info" data-id="{{ item.url }}">

There are a few options:

1. Dynamically add a property that mimics page.url to each item using the before callback. Which requires using JavaScript front matter.
2. Another data source used to formulate a key in each quiz page object, maybe *.11ty.js etc.

Option 1 is converting the pagination data in quiz.md from YAML front matter to JavaScript frontmatter to use the before callback in order to add the url key to each object dynamically. Just add keys to the object like you normal would in YAML, (its actually so cool that we can use {{ var }} template variable syntax inside the JS front matter at some levels)

---js
{
  topline: "This is what the region cares about",
  layout: "some-layout.njk",
  permalink: "quiz/{{ topline | slug }}/{{ pagination.pageNumber + 1 }}/",
  pagination: {
    ....
  }
}
---

Note: I don't think JSON, YAML, or TOML support functions, so it makes sense that it is only supported for JavaScript front matter.

The before callback is only supported in JS front matter. But this is fine, because all the YAML front matter you had in quiz.md can be converted to JS front matter very easily. Below is an example with a before callback that reformats each object in quizData and adds a url key with the value of its corresponding page.url:

---js
{
    title: "Worries",
    topline: "This is what the region cares about",
    share_quiz_text: "Share quiz",
    overview_quiz_text: "Back to overview",
    overview_quiz_link: "/quiz/",
    layout: "/quiztypes/worry.njk",
    color: "blue",
    permalink: "quiz/{{ topline | slug }}/{{ pagination.pageNumber + 1 }}/",
    pagination: {
        data: "quizData",
        size: 1,
        alias: "quiz",
        before: function(data) {
            const topline = "This is what the region cares about";
            // mimic the `slug` filter
            let slugify = (str) => {
                const regex = /[\s+~.()'":@]/g;
                let slug = "";
                if (str && typeof str == 'string') {
                    slug = str.replace(regex, "-").toLowerCase();
                } else {
                    console.log(`${str} is not of type of string!`);
                }
                return slug;
            }
            // Add `url` property to each object in `quizData` with mock page.url 
            const obj = data.map((item, index) => {
                item["url"] = `/quiz/${slugify(topline)}/${index + 1}`;
                return item;
            });
            console.log(obj);
            return obj;
        }
    },
    quizData: [
        {
            "title": "I am concerned about **general economic development**.",
            "answer_page": false,
            "nav_title": "",
            "description": "",
            "answer_site_title": "... general economic development",
            "survey_results": {
                "great_worries": 31.1,
                "some_worries": 55.8,
                "no_worries": 13.1
            },
            "same_as_survey": {
                "few": "",
                "some": "",
                "many": ""
            },
            "info_text": "",
            "more_button": "",
            "more_text": ""
        },
        {
            "title": "I am concerned about my **own economic situation**.",
            "answer_page": false,
            "nav_title": "",
            "description": "",
            "answer_site_title": "... own economic situation",
            "survey_results": {
                "great_worries": 31.1,
                "some_worries": 55.8,
                "no_worries": 13.1
            },
            "same_as_survey": {
                "few": "",
                "some": "",
                "many": ""
            },
            "info_text": "",
            "more_button": "",
            "more_text": ""
        },
        // ... The rest of the objects (See my fork for full updated working code)
    ]
}
---

{{ pagination.pages | dump }}

outputs to the following, where each object in the pagination data now has a key url which has the same value as page.url:

[ { title: 'I am concerned about **general economic development**.',
    answer_page: false,
    nav_title: '',
    description: '',
    answer_site_title: '... general economic development',
    survey_results:
     { great_worries: 31.1, some_worries: 55.8, no_worries: 13.1 },
    same_as_survey: { few: '', some: '', many: '' },
    info_text: '',
    more_button: '',
    more_text: '',
    url: '/quiz/this-is-what-the-region-cares-about/0' },
  { title: 'I am concerned about my **own economic situation**.',
    answer_page: false,
    nav_title: '',
    description: '',
    answer_site_title: '... own economic situation',
    survey_results:
     { great_worries: 31.1, some_worries: 55.8, no_worries: 13.1 },
    same_as_survey: { few: '', some: '', many: '' },
    info_text: '',
    more_button: '',
    more_text: '',
    url: '/quiz/this-is-what-the-region-cares-about/1' } ]

Note: Instead of defining the array of page objects in JavaScript front matter for the pagination data key, just create a global data file in _data like quiz.json. Then you can pass it to the pagination data key like:

---js
{
   pagination: {
     data: "quiz" // where quiz is the name of the global data file (quiz.json)
   }
}
---

Now since the url key is available on each page in pagination data, just use it in worry.njk like {{ item.url }} when iterating pagination.pages:

{% for item in pagination.pages | sortByGreatestWorries %}
   {% if not item.answer_page %}
       ...
         <div class="gauge-result-info worry-result-info" data-id="{{ item.url }}">   

Then on the results page, each resultant set will be displayed in descending order from your sorting filter and have its own custom data attribute from data-id="{{ item.url }}" with values corresponding to the unique quiz page it is (just as page.url would).

and verified in the DOM:

<div class="gauge-result-info worry-result-info" data-id="/quiz/this-is-what-the-region-cares-about/8">
<div class="gauge-result-info worry-result-info" data-id="/quiz/this-is-what-the-region-cares-about/7">
<div class="gauge-result-info worry-result-info" data-id="/quiz/this-is-what-the-region-cares-about/6">
<div class="gauge-result-info worry-result-info" data-id="/quiz/this-is-what-the-region-cares-about/5">
... etc
<div class="gauge-result-info worry-result-info" data-id="/quiz/this-is-what-the-region-cares-about/1">

It seems the use of before and JavaScript frontmatter with pagination has finally cracked the code. Your sorting is working correctly and each page as a unique identifier including the last page. Let me know if this solves things! 🚀

Also all the updated code from this discussion is available at my fork. Since there was alot of YAML objects to convert to JSON, some of the values for each object need to be updated (I copy/pasted objects without updating the survey values) but all the titles are there. Either in global data in quiz.json or if your defining the array inside JS frontmatter. Feel free to mark my answer as the accepted answer to this discussion if it answered all your questions!

[iwm-donath]

Thanks a lot! That definitely fixes things 👍
Thank you again for taking the time and offering a very comprehensive solution!

[tannerdolby]

@iwm-donath Your welcome! I'm glad we were able to figure things out. Happy coding!