Populate html table or list with dynamic data from backend

I have a C# api endpoint that returns a List<Dictionary<string, object>>.

The problem here is this list is dynamic, so I cannot say what the elements could be so I could populate an html list (say with angular) with it, i.e.

<ul *ngFor="let data of dataList">
<li><span>{{data.propertyName}}<span/> -- <span>{{data.propertyValue}}<span/><li>
<ul>

Another data from the endpoint could have more data and different list properties, so instead of propertyName and propertyValue it could be employeeID, employeeName, dateOfBirth etc.

How do I populate the list with only one list markup and api endpoint?

Answer

If I understand your objective correctly, then in Angular you’ll have the property:

dataList: object[]; // data model is unknown

In that case you can:

keys: string[];
...
this.keys = Object.keys(dataList[0]); // once data is retrieved you can extract its model

And in your HTML you can for example:

<ul *ngFor="let data of dataList">
    <li *ngFor="let prop of keys">
        <span>{{ prop }}: {{ data[prop] }} | <span/>
    <li>
<ul>