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
– user_agent, Commented Feb 5, 2020 at 8: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
– igg, Commented Feb 5, 2020 at 9: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
– igg, Commented Feb 5, 2020 at 9:27

igg · Accepted Answer · 2020-02-06 09:52:13Z

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.

Adrita Sharma · Accepted Answer · 2020-02-05 09:09:54Z

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 5, 2020 at 9:09

answered Feb 5, 2020 at 9:08

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

3 Comments

user_agent Over a year ago

No, it did not map with ColumnNames array. Tomorrow there may be some new value.

Adrita Sharma Over a year ago

Can you explain a bit more "did not map with ColumnNames array"

user_agent Over a year ago

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.

Philipp Meissner · Accepted Answer · 2020-02-05 11:06:23Z

0

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

edited Feb 5, 2020 at 11:06

Philipp Meissner

5,4925 gold badges38 silver badges61 bronze badges

answered Feb 5, 2020 at 8:52

Kalpesh Bharambe

319 bronze badges

1 Comment

user_agent Over a year ago

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.

Collectives™ on Stack Overflow

How to create matrix table using json array in Angular

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related