Please help a novice! Problem with JS and Liquid filtering posts

Help
1

I would like to filter JSON keywords by clicking a button but nothing happens even the tags are not shown on the button.

Does anyone has an idea how to solve this? Many thanks!

I tried to use instead of the JSON file in _data, posts in _posts with a post frontmatter and {% assign tag_list = site.tags %} . In this case the tags-string was shown on the button but it wasn’t possible to click on it and start the sorting. But actually I prefer to use a single JSON-file instead of posts.

{% assign tag_list = site.data.test.info %}
{% for tag in tag_list %}
<li>
     <button onclick=myFunction()>{{ tag }}</button>
     <p id="demo"></p>
     <script>
          function myFunction() {
          document.getElementById("demo").innerHTML = "{% assign sorted-posts = site.data.test.info | where: "feature","abc" %}{% for post in sorted-posts %}{% include post.html %}{% endfor %}";
                            }
     </script>
</li>
{% endfor %}
2

This should not work, a colon signifies another key value pair so you need to enclose the url in quotes

As for your JS, Jekyll (and liquid) runs once at build time - you can’t have JS use liquid as the site will already be built.

You’ll need to have everything in json and then parse that how ever you want - which will be beyond my skill set but I am sure can be done.

3

Thank you for answering. Do I understand you correctly that the html-code of post.html must already be included in the JSON data file for it to work? Something like this:

"info": [
{
    "tags": "[xyz]",
    "title": "xyz",
    "url":"www.xyz.com",
    "html":"<h1>xyz</h1> ... "
},
...
]
4

what you are trying to do isn’t real clear to me since you said you had a json file already, and you referenced a data file as well as posts.

To do what you want you would probably need a json file with all the info needed to make your button be able to sort - which is probably mostly the meta data about the post - like the title, url and description etc. (but I don’t think you need the post itself?) Somehow you need to get that into a json file so that JS can then do all the fun stuff.

I would have jekyll do this for me, you can make a template/page that will loop thru all the posts to make a json file of whatever you need, here is some info on one way to do it:

5

and no, I don’t think you should have html in your json file, that looks weird. I think you just need the list of titles and urls and then when they click the button to sort the list they still then click the link to read the article?

When JS gets the json, it should be able to format it how ever needed. Unless you are using markdown in which case you could use JS to parse the markdown with a library.

again, not real sure what you are trying to do, I am picturing a list of posts, and when you click on a post it takes you to the posts page so the post content doesn’t need to be in the json.

6

I think you got what I tried to tell you… :wink: I would like to sort posts by all keywords in the frontmatter. Actually, maybe I don’t need a JSON-file. I have everything in the posts with frontmatter and content. But the problem was that I didn’t manage it to sort the post by other keywords in the frontmatter then “tags” or “category”. Therefore I generated a JSON file containing all metadata and content of all posts. Then it was possible for me to sort with {% .... | where: "..",".." %} but it wasn’t possible for me to output the html by clicking the button because I needed a static link to a directory with pre-sorted posts (this only worked for “tags” because you can link to jekylls tags-folder). I thought of generating directories by other frontmatter keywords (i.e. author, geographic location etc.) but I don’t know how to do it and I guess there must be simpler solutions.

I’m sorry about the awkward explanation. But jekyll, js and liquid is new for me…

7

what you want to do is probably a fair amount of JS to do - it would need the json file to load the data though - trying to do it statically would be a pain and hard to maintain I think.

I have not done the JS side of it, I am much more competent with jekyll and liquid. I can see how it could be done though. But if you are new to all of this I would probably not try to do it right off the bat - although it would be a really good learning experience. You seem to be doing well with liquid, I think you just need to get a bit more experience with how it all works first and then you can tackle the JS part.