How do I render ordered and unordered lists in pugjs coming from Prismic?

Hi all,

I am using Express, PugJs, and Prismic to create a blog article.

Prismic end-point returns a JSON body with “type” for each part of the article, i.e. it could be a paragraph, an image, a header, or a list.

I then use pugjs to case statement to handle each type the following way:

            div(class='article-body')
            - let ul_list = false
            - let ol_list = false
            each item in document.ik_article_content
                case item.type
                    when 'paragraph'
                        - ol_list = false
                        - ul_list = false
                        p #{item.text}
                    when 'heading1'
                        h1 #{item.text}
                    when 'heading2'
                        h2 #{item.text}
                    when 'heading3'
                        h3 #{item.text}
                    when 'heading4'
                        h4 #{item.text}
                    when 'image'
                        img(class='article-body__image' src=`${item.url}`)
                    when 'hyperlink'
                        a(href=`${item.text}`) 
                    when 'o-list-item'
                        if !ol_list 
                            - ol_list = true
                            ol
                                li #{item.text}
                        else
                            li #{item.text}
                    when 'list-item'
                        if !ul_list 
                            - ul_list = true
                            ul
                                li #{item.text}
                        else
                    default 
                        p #{item.text}

Prismic returns to types: ‘o-list-item’ (ordered list) and ‘list-item’ (unordered list) but I don’t know when a list ends / begins.

I need to interpret these types in order to create the opening and closing ol o ul tags.

The problem is that I am unsure how to do that especially with pugjs which auto closes tags and prismic doesn’t need to have a way of telling me that a tag has opened or closed.

In the code above I tried to create a variable which indicates that a list has started, and then I try to set that variable to false if a list has ended. But that doesn’t work.

How else could I handle dynamically create ordered and unordered lists with pugjs? Or is there something I am missing from Prismic?

Was hoping someone could help me.

Thank you!

Ivan

Hi @khokhlov.ivan. Prismic actually already has a library that can help you convert the Rich Text JSON into HTML:

Here is the documentation for templating a Rich Text or Title field for Express & Pug:
https://prismic.io/docs/nodejs/templating/rich-text