Creating matrix using typescript array

Question

My typescript code has an array which has stepid, stepName, aoiId, aoiName, isChecked and isStepForAoi. Each combination is unique with stepId and aoiId. I need to display this in a matrix with column made up of AoiNames and rows made up of stepNames.

allStepAoiList =
[
    {
        stepId: "1",
        stepName: "Phase 1",
        aoiId: "10",
        aoiName: "AOI 1",
        isChecked: false,
        isStepForAoi: true
    },
    {
        stepId: "1",
        stepName: "Phase 1",
        aoiId: "11",
        aoiName: "AOI 2",
        isChecked: false,
        isStepForAoi: true
    },
    {
        stepId: "1",
        stepName: "Phase 1",
        aoiId: "12",
        aoiName: "AOI 3",
        isChecked: false,
        isStepForAoi: true
    },
    {
        stepId: "2",
        stepName: "Phase 2",
        aoiId: "10",
        aoiName: "AOI 1",
        isChecked: false,
        isStepForAoi: true
    },
    {
        stepId: "2",
        stepName: "Phase 2",
        aoiId: "11",
        aoiName: "AOI 2",
        isChecked: false,
        isStepForAoi: true
    },
    {
        stepId: "2",
        stepName: "Phase 2",
        aoiId: "12",
        aoiName: "AOI 3",
        isChecked: false,
        isStepForAoi: true
    },
    {
        stepId: "3",
        stepName: "Phase 2 Consensus",
        aoiId: "10",
        aoiName: "AOI 1",
        isChecked: false,
        isStepForAoi: false
    },
    {
        stepId: "3",
        stepName: "Phase 2 Consesus",
        aoiId: "11",
        aoiName: "AOI 2",
        isChecked: false,
        isStepForAoi: false
    },
    {
        stepId: "3",
        stepName: "Phase 2 Consensus",
        aoiId: "12",
        aoiName: "AOI 3",
        isChecked: false,
        isStepForAoi: false
    },
];

My html to display the matrix

              <table class="k-grid">
                    <tr class="k-alt">
                        <td>Step</td>
                        <td>Select All</td>
                        <td *ngFor="let item of allStepAoiList;">
                            {{ item.aoiName }}
                        </td>
                    </tr>
                    <tr class="k-alt">
                        <td></td>
                        <td><input type="checkbox" /></td>
                        <td *ngFor="let item of allStepAoiList;">
                            <input type="checkbox" />
                        </td>
                    </tr>
                    <tr *ngFor="let item of allStepAoiList; let odd = odd;" [ngClass]="{ 'k-alt': odd}">
                        <td style="text-align:left">{{ item.stepName }}</td>
                        <td style="text-align:center"><input type="checkbox" /></td>
                        <td *ngFor="let item of allStepAoiList;" style="text-align:center">
                            <div *ngIf="item.isStepForAoi">
                                <input type="checkbox"
                                       (change)="getStepAoiDataList($event,aoi,advisorStep)" />
                            </div>
                        </td>
                    </tr>
                </table>

Right now it displays 9 columns for AOI and 9 rows of steps: I want it to display only 3 distinct aoi columns and 3 distinct step rows with 9 checkboxes. Any suggestions?

What have you tried so far? You can get the distinct values for your IDs using the `map` operator along with this: https://stackoverflow.com/questions/1960473/get-all-unique-values-in-an-array-remove-duplicates — Daniel W Strimpel, Apr 11 '18 at 04:37
Thank you! I was able to use pipe to get unique stepNames and aoiNames. — MistryN, Apr 11 '18 at 18:10

Creating matrix using typescript array

0 Answers0