I am trying to iterate through an Object that I receive through a service call and then placing this iteration onto a table using *ngFor.

However I receive the following error when trying to do so.

Error trying to diff '[object Object]'. Only arrays and iterables are allowed

I understand you can't iterate through an Object but when I was trying to look for a solution it didn't quite make sense to me. Please see my code below, any help will be greatly appreciated :

.ts

searchValue: string = "3";

logList: any = [];

   

getLogs() {

        const numOfLogs = new FormData();

        numOfLogs.append('n_log', this.searchValue)

        this.fileUploadService.getLogs(numOfLogs).subscribe(

          data =>  {this.logList = data},

        );

      }

html

<table class="table table-striped" style="width:1000px;table-layout:fixed;font-size:10px;color:black;">

                <thead>

                    <tr>

                        <th>Name</th>

                        <th>Date</th>

                        <th>FilePath</th>

                        <th>Updated</th>

                    </tr>

                </thead>

                <tbody>

                    <tr *ngFor="let item of logList">

                        <td>{{ item.Name}}</td>

                        <td>{{ item.Date}}</td>

                        <td>{{ item.FilePath}}</td>

                        <td>{{ item.Updated}}</td>

                    </tr>

                </tbody>

            </table>

console.log(this.logList)

{

  "Name": [

    "name1",

    "name2",

    "name3"

  ],

  "Date": [

    "2021-12-13",

    "2021-12-12",

    "2021-12-11"

  ],

  "FilePath": [

    "FileName1.xlsx",

    "FileName2.xlsx",

    "FileName3.xlsx",

  ],

  "Updated": [

    "2021-12-31T00:00:00",

    "2021-12-31T00:00:00",

    "2021-12-31T00:00:00",

  ],

}