Create multiple tables based on json data in Angular 8

Question

I have a json object:

const dummyData = [
{group: "withoutHistory", view="pending", total=70},
{group: "withHistory", view="pending", total=10},
{group: "hold", view="security", total=17},
{group: "confirmed", view="verfication", total=11},
{group: "notConfirmed", view="verfication", total=15}
]

I want to create multiple datatables/grid based on the views.

this json object will create 3 datatables:

**table 1** for pending

group                           total
withoutHistory                   70
withHistory                      10

**table 2** for security

group                           total
hold                             17

**table 3** for verification

group                           total
confirmed                        11
notConfirmed                     15

How can I create 3 tables based on this json data? Thanks in advance. I tried to loop through the json data but I didn't get any luck. It would be great to have one data table as component and send data source based on view element of Json data.

Shabbir Dhangot · Accepted Answer · 2020-04-27 02:24:59Z

1

You above json contains = sign that is invalid. I have corrected and based on your input I have separated your data into three separate array below. You can execute code and check.

var dummyData  =  [
{group: "withoutHistory", view:"pending", total:70},
{group: "withHistory", view:"pending", total:10},
{group: "hold", view:"security", total:17},
{group: "confirmed", view:"verfication", total:11},
{group: "notConfirmed", view:"verfication", total:15}
]
var separate={};
for(var row of dummyData) {
  if(separate.hasOwnProperty(row.view)){
  	separate[row.view].push(row);
  } else {
  	separate[row.view] = [row];
  }
}
console.log(separate);

answered Apr 27, 2020 at 2:24

Shabbir Dhangot

9,14110 gold badges64 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ABHI SHARMA Over a year ago

Thank you so much for the response. How can I use this resulted json in the front end to create 3 data tables?

Shabbir Dhangot Over a year ago

You can use like, separate.pending array and display data using ngFor. Read in detail here angular.io/guide/displaying-data#add-logic-to-loop-through-data

Collectives™ on Stack Overflow

Create multiple tables based on json data in Angular 8

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related