角度2つの解析JSONオブジェクトテーブルに行の値は、列

Question

である場合、私はAPIからのIEnumerableとして送られる次のクラスがあります。これは、データは次のように渡されること角クラスである

public class LogsDto 
{ 
    public decimal Value { get; set; } 
    public DateTime Time_Stamp { get; set; } 
    public string TagName { get; set; } 

} 

を配列：私はトンをしたい、角度で

{ "value": 100, "time_Stamp": "2017-05-04T00:07:47.407", "tagName": "Tag 1" }, 
{ "value": 200, "time_Stamp": "2017-05-04T00:07:47.407", "tagName": "Tag 2" }, 
{ "value": 300, "time_Stamp": "2017-05-04T00:07:47.407", "tagName": "Tag 3" }, 
{ "value": 150, "time_Stamp": "2017-05-04T00:07:57.407", "tagName": "Tag 1" }, 
{ "value": 250, "time_Stamp": "2017-05-04T00:07:57.407", "tagName": "Tag 2" }, 
{ "value": 350, "time_Stamp": "2017-05-04T00:07:57.407", "tagName": "Tag 3" } 

：

export class Logs { 
    value: number; 
    timestamp: string; 
    tagName: string; 
} 

サンプル・データはように出くわしますこれを次のような表に変えてください：

<table> 
    <th>Time_Stamp</th> <th>Tag 1</th> <th>Tag 2</th> <th>Tag 3</th> 

    <td>2017-05-04T00:07:47.407</td> <td>100</td> <td>200</td> <td>300</td> 

    <td>2017-05-04T00:07:45.407</td> <td>150</td> <td>250</td> <td>350</td> 
</table> 

私は上記のようにハードコーディングできます。私が抱えている問題は、データを列から行に解析する方法がわかりません。 "tagName"プロパティは常に同じではありません。 10種類のタグ名があることもあります。

何か助けていただければ幸いです。

Answer 1

すばやく解決するには、反射によって返されるオブジェクトからすべての固有のプロパティを見つけて保存することです。その後、ヘッダーをレンダリングし、各オブジェクトをレンダリングし、ngForsのネストされたセットの列を介してアクセスすることができます。これは偶然に列を評価するときと同じ順序を維持する必要があります。また、ピボットのようなものを実行するためにデータの投影を実行することもできます。次に、データをタイムスタンプでグループ化し、そのために100％steal someone else's SO group by functionを実行します。

制御の順序はピボットで、次に列ヘッダーの評価です。

カラム評価：

generateColumnHeaders(myObjectArray) { 
this.columns = []; 
for(var i = 0; i < myObjectArray.length; ++i) { 
    for(var col in myObjectArray[i]) { 
     if(myObjectArray[i].hasOwnProperty(col)) { 
     if(this.columns.findIndex(colmn => colmn === col) === -1) { 
      this.columns.push(col); 
     } 
     } 
    } 
    } 
} 

ピボット及び他の変換：

transformArray(objectArray, accessObject) { 
    return this.groupByArray(objectArray.map(obj => 
    { 
     var tagNameString = obj.tagName; 
     let tempObj = {}; 
     tempObj[accessObject.pivotColumn] = obj.time_Stamp; 
     tempObj[obj.tagName] = obj.value; 
     return tempObj; 
    }), accessObject.pivotColumn).map(tsg => { 
     let tempObj = {}; 
     tempObj[accessObject.pivotColumn] = tsg.time_Stamp; 
     for(var i = 0; i < tsg.values.length; ++i) { 
     for(var tag in tsg.values[i]) { 
      if(tag.indexOf(accessObject.dynamicColumnCommon !== -1)) { 
      tempObj[tag] = tsg.values[i][tag]; 
      } 
     } 
     } 

     return tempObj; 
    }); 
} 

制御コード：

this.myObjectArray = this.transformArray(this.myObjectArray, { pivotColumn: "time_Stamp", dynamicColumnCommon:"Tag"}); 

this.generateColumnHeaders(this.myObjectArray); 

テンプレート評価：

<table> 
<tr> 
    <th *ngFor="let column of columns">{{column}}</th> 
    </tr> 
    <tr *ngFor="let obj of myObjectArray"> 
    <td *ngFor="let column of columns">{{obj[column]}}</td> 
    </tr> 
</table> 

Plunker

Answer 2

これは私がそれをうまく動作させる方法です。それはかなり速いですが、私はそれを最も効率的な方法でやっていないと確信しています。建設的な批評に感謝します。

parseLogs(logs: Logs[]): void { 
const ts: string[] = logs.map(data => data.time_Stamp.toString()); 
var timestamps = ts.filter((x, i, a) => x !== undefined && a.indexOf(x) === i); 


var jsonString: string = '['; 

for (var j = 0; j < timestamps.length; j++) { 
    var date = new Date(timestamps[j]); 
    var hours = date.getHours().toString(); 
    if (date.getHours() < 10) 
    hours = '0' + hours; 
    var minutes = date.getMinutes().toString(); 
    if (date.getMinutes() < 10) 
    minutes = '0' + minutes; 

    var dtString: string = (date.getMonth() + 1) + '-' + date.getDate() + '-' + date.getFullYear() + ' ' + date.getHours() + ':' + date.getMinutes(); 

    jsonString = jsonString + '{"Time Stamp":"' + dtString + '"'; 

    for (var i = 0; i < logs.length; i++) { 
    if (logs[i].time_Stamp === timestamps[j]) 
     jsonString = jsonString + ',"' + logs[i].tagName + '":' + logs[i].value + ''; 
    } 

    if (j === (timestamps.length - 1)) { 
    console.log('j:' + j + 'logs.length:' + logs.length.toString()); 
    jsonString = jsonString + '}'; 
    } else { 
    console.log('j:' + j + 'logs.length:' + logs.length.toString()); 
    jsonString = jsonString + '},'; 
    } 
} 

jsonString = jsonString + ']'; 

console.log(jsonString); 

this.myLogs = JSON.parse(jsonString); 

//From example shown above 
this.generateColumnHeaders(this.myLogs);