Angular Table: Object Data shows in one row-CodePudding

I am trying to create a table where the input is a Type object. I have managed to return the data in the table however there are currently two issues:

The Value of the Data doesn't match the column
All the values are in one row (i.e Success, Success, Success)

I understand that I should use some mapping logic however, I can't seem to get my head round that. Any help will be greatly appreciated, thanks

.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  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>
            <td *ngFor="let item of logList | keyvalue"">{{ item.value}}</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",
  ],
}

CodePudding user response：

You're telling it to repeat over each key so:

<td *ngFor="let item of logList | keyvalue">{{ item.value}}</td>

Would become:

<tr>
    <td>{{ logList.Name }}</td>
    <td>{{ logList.Date }}</td>
    <td>{{ logList.FilePath }}</td>
    <td>{{ logList.Updated }}</td>
</tr>

Which would then be interpolated as:

<tr>
    <td>name1,name2,name3</td>
    <td>...etc</td>
</tr>

I'm guessing what you want is:

<tr>
    <td>name1</td>
    <td>2021-12-13</td>
    <td>FileName1.xlsx</td>
    <td>2021-12-31T00:00:00</td>
</tr>
<tr>
    <td>name2</td>
    <td>2021-12-12</td>
    <td>FileName2.xlsx</td>
    <td>2021-12-31T00:00:00</td>
</tr>
...etc

The easiest thing would be to parse your data into a different type. So your data would look then like this

[
    { 
        "Name": "name1",
        "Date": "2021-12-13",
        "FilePath": "FileName1.xlsx",
        "Updated": "2021-12-31T00:00:00",
    },
    ...
]

Then your html would look like this instead:

<tr *ngFor="log in logList"> <!-- notice the ngFor is now on the row -->
    <td>{{ log.Name }}</td>
    <td>{{ log.Date }}</td>
    <td>{{ log.FilePath }}</td>
    <td>{{ log.Updated }}</td>
</tr>

If you're unable to modify the data coming back to look like that, you'd have to parse it on your own:

...
  this.fileUploadService.getLogs(numOfLogs).subscribe(data =>  {
    this.logList = [];
    for(var x = 0; x < data.Name.length; x  ){
        this.logList.push({
            Name: data.Name[x],
            Date: data.Date[x],
            FilePath: data.FilePath[x],
            Updated: data.Updated[x],           
        });
    }
  });