如何使用 angular 材料表显示来自 API 响应的 object？

Question

I have an object coming from response which looks something like . It's a dynamic key value pair

{
  "name1": "value1",
  "name2": "value2",
  "name3": "value3"
  ............
  ............
}

I want to generate a material table from this. I want to know how to get the response into my component file.

I'm getting the response in my service file.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { map } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private headers = new Headers({ 'Content-Type': 'application/json' });  
  url: string = '';  
  constructor(private http:HttpClient) {
    this.url = "https://beta.randomapi.com/api/3141b5683af0edf576dabdb50ef1ff64?fmt=prettyraw&sole"; 
   }
   public getData() {  
    return this.http.get(this.url )  
      .pipe(map((res: Response) => {  
        return res.json();  
      })); 

  }  


}

Answer 1

First the datasource must be a array and the json you mentioned should be representing a row in table. Here is a sample example to use this. This will give you a direction to move forward.