CODEWITHSUNDEEP
jsonangulartypescripthttpclientangular5
Abhishek
Abhishek

Reputation: 1068

Dynamic header and content parsing of json object in angular

This is in reference to question which i have already asked. Parse JSON strnig from API in angular

In this question you can check accepted answer. There it is mentioned that i need to have 100% mapping of index. But, I want to explore the dynamic part of angular. What if i have no idea what will be coming from backend but i do know that it will be well formed JSON object. Let's take example from previous question: 

[
  {
    "id": 1,
    "symbol": "20MICRONS",
    "series": "EQ",
    "isin": "INE144J01027",
    "created_at": "2018-03-05 16:24:10",
    "updated_at": "2018-03-05 16:24:10"
  },
  {
    "id": 2,
    "symbol": "3IINFOTECH",
    "series": "EQ",
    "isin": "INE748C01020",
    "created_at": "2018-03-05 16:24:10",
    "updated_at": "2018-03-05 16:24:10"
  },
  {
    "id": 3,
    "symbol": "63MOONS",
    "series": "EQ",
    "isin": "INE111B01023",
    "created_at": "2018-03-05 16:24:10",
    "updated_at": "2018-03-05 16:24:10"
  },
  {
    "id": 4,
    "symbol": "VARDMNPOLY",
    "series": "EQ",
    "isin": "INE835A01011",
    "created_at": "2018-03-05 16:24:10",
    "updated_at": "2018-03-05 16:24:10"
  }
]

This is the reply from the API. I need to convert it in table on frontend with header id,symbol,.....update_at and in body with respective data.

A sample component would look like:

export class SymbolsComponent implements OnInit {

  headerCols: string[] = [];
  contentBody: string[] = [];

  constructor(private http: HttpClient, private apiUrl: ApiUrlService) { }

  ngOnInit() {
    this.fetchListOfAllSymbol();
  }

  fetchListOfAllSymbol() {
    this.http.get(this.apiUrl.getBaseUrl() + 'symbol').subscribe(data => {
        console.log(data);

    });
  }

}

How can i populate headers of json object in headerCols and content array in contentBody so that i can run *ngFor on and respectively.

Output of data:

(4) [{…}, {…}, {…}, {…}]
0:{id: 1, symbol: "20MICRONS", series: "EQ", isin: "INE144J01027", created_at: "2018-03-05 16:24:10", …}
1:{id: 2, symbol: "3IINFOTECH", series: "EQ", isin: "INE748C01020", created_at: "2018-03-05 16:24:10", …}
2:{id: 3, symbol: "63MOONS", series: "EQ", isin: "INE111B01023", created_at: "2018-03-05 16:24:10", …}
3:{id: 4, symbol: "VARDMNPOLY", series: "EQ", isin: "INE835A01011", created_at: "2018-03-05 16:24:10", …}
length:4
__proto__:Array(0)

Upvotes: 0

Views: 2010

Answers (2)

Oleksandr Poshtaruk
Oleksandr Poshtaruk

Reputation: 2146

 fetchListOfAllSymbol() {
     this.http.get(this.apiUrl.getBaseUrl() + 'symbol').subscribe(data => {
       this.headerCols = Object.keys(data[0]);
       data.forEach((item) =>{
          let values = Object.keys(item).map((key)=> item[key]);
          this.contentBody.push(values);
   });

   });
 }

Upvotes: 1

jriver27
jriver27

Reputation: 880

Here is some pseudo code for what I would do. Remember to have checks for "is empty" and others. 

export class SymbolsComponent implements OnInit {

  headerCols: string[] = [];
  contentBody: string[] = [];

  constructor(private http: HttpClient, private apiUrl: ApiUrlService) { }

  ngOnInit() {
    this.fetchListOfAllSymbol();
  }

  fetchListOfAllSymbol() {
    this.http.get(this.apiUrl.getBaseUrl() + 'symbol').subscribe(data: any[] => {
      // data is an array of any 

      // Dynamically get the property names of the Object
      const keys: string[] = Object.keys(data[0]);

      // now we loop through the items and use the keys to get the values

      // Here you can make some custom logic to 
      // create your table 
      each(let obj in data){
        each(let key in keys){
          console.log(obj[key]);
        }
      }   
    });
  }

}

Upvotes: 0

Related Questions