从javascript变量渲染Jade / Pug

Question

I'm having some troubles while working with Pug (Jade) lately. I'm sending an array from my back to my front and then I'm sorting it client-side.

It looks like this :

potentials is the array of objects that I'm sending to my front from my back with res.render('./myPage', {potentials})

script.

    $(document).ready(function() {
      $("#age-slider").change(function(){

        var slider = document.querySelector('#age-slider')
        var sliderInputs = slider.querySelectorAll('input[type=range]')
        var found_age = potentials.filter(v => v.age >= sliderInputs[0].value && v.age <= sliderInputs[1].value);
        console.log(found_age)

      })
    })
  if (found_age)
    span
      li
       found_age.username

So my sort is working I can log my values when I'm playing with the inputs but how can I render my array found_age on this pug page now ? What I have

Thanks for any help !

Answer 1

After a long night of dig here's what is working for me :

found_age = potentials.filter(v => v.age >= sliderInputs[0].value && v.age <= sliderInputs[1].value);
      console.log(found_age)
        document.getElementById('array-Filter').innerHTML = found_age.map((user) => {
            return `
            <li>${user.username}  ${user.age} years old from ${user.city}</li>
            `;
        }).join('');