代码之家 › 专栏 › 技术社区 › Abhishek

angular中json对象的动态头和内容解析

angular5 httpclient typescript angular json

Abhishek · 技术社区 · 7 年前

这是关于我已经问过的问题。 Parse JSON strnig from API in angular

在这个问题中,您可以检查已接受的答案。这里提到,我需要有索引的100%映射。但是,我想探索角度的动态部分。如果我不知道后端会产生什么,但我知道它将是格式良好的JSON对象,该怎么办。让我们以上一个问题为例:

[
  {
    "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"
  }
]

这是API的回复。我需要在前端的表格中用页眉将其转换 id ,则, symbol ,。。。。。 update_at 并在正文中提供各自的数据。

示例组件如下所示:

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);

    });
  }

}

如何在中填充json对象的标头 headerCols 和中的内容数组 contentBody 这样我可以分别在和上运行*ngFor。

数据输出:

(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)

2 回复 | 直到 7 年前

Oleksandr Poshtaruk 7 年前

 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);
   });

   });
 }

jriver27 7 年前

下面是一些我将要做的伪代码。记住检查“是空的”和其他。

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]);
        }
      }   
    });
  }

}