How to properly loop, filter array object in v6 correctly without using template7 handlebars?

1

I have tried to understand the v6 for not using template7 for it and still having issues with filter array to display content

this is a sample array:

    const adult = [{
        name: 'juan',
        sport: 'football',
        gender: 'male'
      },
      {
        name: 'maria',
        sport: 'volley',
        gender: 'female'
      },
      {
        name: 'jorge',
        sport: 'tennis',
        gender: 'male'
      }
    ];

in html

this works

      <!-- print array -->
      <br />
      ${adult.map((adult) => $h`
      <ul>  
      <li>name: ${adult.name}</li>
      <li>sport: ${adult.sport}</li>
      <li>gender: ${adult.gender}</li>
      </ul>
      `)}

output:

name: juan
sport: football
gender: male

name: maria
sport: volley
gender: female

name: jorge
sport: tennis
gender: male

===
this works as well but it prints false when gender is female

      <!-- print array -->
      ${adult.map((adult) => $h`
        
      ${(adult.gender == "male") && $h`
      
      <ul>
        <li>name: ${adult.name}</li>
        <li>sport: ${adult.sport}</li>
        <li>gender: ${adult.gender}</li>
      </ul>
      `}
      `)}

output:

name: juan
sport: football
gender: male

false //this suppose not to be printed

name: jorge
sport: tennis
gender: male

===
this works too to filter but I cant loop the filtered array but it outputs the array object

      <!-- print array -->
      ${adult.filter((adult) => $h`

        ${(adult.gender == "male") && $h`
      
        <ul>
          <li>name: ${adult.name}</li>
          <li>sport: ${adult.sport}</li>
          <li>gender: ${adult.gender}</li>
        </ul>
        `}
      `)

output:

[object Object][object Object]

is there any good samples of how to manipulate arrays in v6?
any help appreciated!

2

I found this solution for the second to hide false when gender is female case but not for the filter case!

      <!-- print array -->
      ${adult.map((adult) => $h`
        
      ${(adult.gender === "male") ? $h`

      <ul>
        <li>name: ${adult.name}</li>
        <li>sport: ${adult.sport}</li>
        <li>gender: ${adult.gender}</li>
      </ul>

      ` : ``}

     `)}

output:

name: juan
sport: football
gender: male

name: jorge
sport: tennis
gender: male

Any tip for the filter case?

3 
${adult.filter(o => o.gender != 'female').map((a) => $h`
  <li>${a.name} ${a.sport} ${a.gender}</li>
`)}
3 Likes
4

thanks the tips! :slightly_smiling_face: