Handlebars HBS Express - How to iterate an object without specify the properties

Question

I am trying to iterate using the properties of an object to dynamically print a table having an array with the properties and an object with the values ​​of each property.

I don't know how to do the 2 iterations using hbs express from handlebars

people: [{
    name: "ken",
    lastname: "grace",
    age: 10
},
{
    name: "ron",
    lastname: "bond",
    age: 20
}];

properties = ["name","lastname", "age"];

HTML CODE:

<table>
                        <thead>
                            <tr>
                                {{#each properties as |property index|}}
                                    <th>
                                        <span>{{property}}</span>
                                    </th>
                                {{/each}}
                            </tr>
                            
                        </thead>
                        <tbody>
                            {{#each people}}
                                <tr>
                                    {{#each properties}}
                                        <th>
                                            {{!-- trying something like: --}}
                                            {{!-- {{people.property}} --}}
                                        </th>
                                    {{/each}}
                                </tr>
                            {{/each}}
                        </tbody>
                    </table>

Answer 1

As user @76484 mentioned, you want to use the built-in lookup helper:

The lookup helper allows for dynamic parameter resolution using Handlebars variables. It can be used to look up properties of object based on data from the input.

In your specific example, you'd probably want to store your people and properties iterations in a block parameter (e.g., named |person| and |property|), as well as using ../ on your inner loop since the context has changed.

Putting that all together for you example, the HBS markup might look like:

<table>
    <thead>
        <tr>
            {{#each properties as |property index|}}
                <th><span>{{property}}</span></th>
            {{/each}}
        </tr>
    </thead>
    <tbody>
        {{#each people as |person|}}
            <tr>
                {{#each ../properties as |property|}}
                    <th>{{lookup person property}}</th>
                {{/each}}
            </tr>
        {{/each}}
    </tbody>
</table>

See this playground link for the resulting HTML as well.