AEM HTL data-sly-list just prints array as a string

Question

I have a Java file returning an ArrayList of Buttons with a button_text property

    public void activate() throws Exception {

        buttonsNode = getResource().adaptTo(Node.class).getNode("buttons");
        buttons = new ArrayList<Button>();

        try{

            NodeIterator ni = buttonsNode.getNodes();

            while (ni.hasNext()) {

                Node n = (Node)ni.nextNode();

                    String button_text = n.getProperty("buttonText").getString();

                    Button bs = new Button(button_text);
                    buttons.add(bs);


            }
        }
        catch(Exception e){

        }

    }

    public ArrayList<Button> getButtonsListObject(){
        return buttons;
    }

   public class Button {
       String button_text;

       public Button(String button_text) {
           this.button_text = button_text;
       }

       public String getButtonText() {
           return button_text;
       }
   }

If I put

       <ul data-sly-list.button="${PillButtons.buttons}">
            <li>${button}</li>
        </ul>

in my HTL I just get a list with one item that is just the array in plain text: "[{ "buttonText": one},{ "buttonText": two},{ "buttonText": three}]"

And doing

   <ul data-sly-list.button="${PillButtons.getButtonsListObject}">
      <li>${button}</li>
    </ul>

Returns a list with three items but they are all blank.

How do I properly access and print this ArrayList?

Answer 1

For the first attempt, I'm unsure where the ${PillButtons.buttons} is coming from, maybe you also have a String getButtons() that returns that JSON.

For the second one, you are using the right method in ${PillButtons.getButtonsListObject} (you could also use ${PillButtons.buttonsListObject} as HTL is smart enough to look for the getter) but you also need to print out <li>${button.buttonText}<li> to get the expected output.