How to create matrix table using json array in Angular

Question

I need to create one matrix table of each combination by comparing the two array object using Angular. I am explaining my code below.

ColumnNames= ["Colour", "Size"];
configArr={
  "Colour":["Black", "Red", "Blue","Grey"],
  "size": ["XS","S","XL","XXL","M"]
}

Here I have two array. My first array ColumnNames values will be the table column header and accordingly I need to create the matrix like below.

Expected output::

Colour        Size

 Black          XS
 Black           S
 Black          XL
 Black         XXL
 Black          M
 Red           XS
 Red            S
 Red           XL
 Red           XXL
 Red            M

.................
................
................

Like the above format I need to display the data into angular table. I need only create the matrix dynamically.

@IraklisGkougkousis: yes, first the matrix need to be formed and then I can bind that array inside one table. — user_agent, Feb 05 '20 at 08:57
Another question, do you only want to show the `ColumnNames` that you have defined, even if `configArr` has more properties? Example: `configArr` has `Colour`, `Size`, `Price`. `ColumnNames` only has `Colour` and `Size` -> so you only want to show `Colour` and `Size`, correct? — igg, Feb 05 '20 at 09:18
I understand that, I'm asking something else. I mean do you only want to show `ColumnNames` even if `configArr` has more key values? See my example please. — igg, Feb 05 '20 at 09:27

score 1 · Answer 1 · answered Feb 06 '20 at 09:52

A generic solution that works with any configArr, as long as all keys in that object are string[]. Inspired by this.

app.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular";

  // Comment in/out properties here to see how the table changes
  configArr = {
    Colour: ["Black", "Red", "Blue", "Grey"],
    Size: ["XS", "S", "XL", "XXL", "M"],
    //Price: ["$5", "$10", "$15"],
    //Brand: ["B1", "B2", "B3"]
  };

  // This will be an [] of objects with the same properties as configArr
  matrix;

  allPossibleCases(arr) {
    // Taken almost exactly from the linked code review stack exchange link
  }

  ngOnInit() {
    const configKeys = Object.keys(this.configArr);
    const arrOfarrs = configKeys.map(k => this.configArr[k]);
    const result = this.allPossibleCases(arrOfarrs);
    this.matrix = result.map(r => {
      const props = r.split(' ');
      let obj = {};
      for(let i=0;i<props.length;i++) {
        obj[configKeys[i]] = props[i]
      }
      return obj;
    });
  }
}

app.component.html

<table>
  <thead>
    <tr>
      <th *ngFor="let kv of configArr | keyvalue">{{ kv.key }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let elem of matrix">
      <td *ngFor="let kv of elem | keyvalue">{{ kv.value }}</td>
    </tr>
  </tbody>
</table>

Stackblitz.

Also, see this for the algorithm behind it.

score 0 · Answer 2 · edited Feb 05 '20 at 11:06

0

configArr.Colour.forEach((color) => {
  configArr.size.forEach((size) =>{
    console.log(color ,"  ", size); // Change this according to your table
  })
})

edited Feb 05 '20 at 11:06

Philipp Meissner

5,273
5
34
59

answered Feb 05 '20 at 08:52

Kalpesh Bharambe

21
8

It should be map with `ColumnNames` values because there may be more values in future so it need to be dynamic. means the values of `ColumnNames` array will be the key name of `configArr`. – user_agent Feb 05 '20 at 08:54

Adrita Sharma · Answer 3 · 2020-02-05T09:09:54.070

0

Try like this:

<table>
    <tr>
        <th *ngFor="let heading of ColumnNames"> {{heading}} </th>
    </tr>
    <ng-container *ngFor="let color of configArr.Colour">
        <tr *ngFor="let size of configArr.size">
            <td>{{color}}</td>
            <td>{{size}}</td>
        </tr>
    </ng-container>
</table>

Working Demo

edited Feb 05 '20 at 09:09

answered Feb 05 '20 at 09:08

Adrita Sharma

21,581
10
69
79

No, it did not map with `ColumnNames` array. Tomorrow there may be some new value. – user_agent Feb 05 '20 at 09:09
Can you explain a bit more "did not map with ColumnNames array" – Adrita Sharma Feb 05 '20 at 09:11
Ok, Here each value of `ColumnNames` array are the keys for `configArr` json object. so if I will add `subject` to `ColumnNames` and `configArr={ "Colour":["Black", "Red", "Blue","Grey"], "size": ["XS","S","XL","XXL","M"], "subject": ["Math","History"] }` then at this time what will happen. – user_agent Feb 05 '20 at 09:13

How to create matrix table using json array in Angular

3 Answers3