How to display multiple value array in a card using angular 4

Question

[
{
"categoryId": 1,
"categoryName": "Painting",
"categoryDesc": "Painting of all types",
"categoryServicemodel": [
  {
    "serviceId": 1,
    "serviceName": "Test12",
    "serviceDesc": "test12",
    "isActive": 1
  },
  {
    "serviceId": 3,
    "serviceName": "TESTINGEXAMPLE ",
    "serviceDesc": "TESTINGEXAMPLE Details Information",
    "isActive": 1
  }
],
"active": 1
},
{
"categoryId": 2,
"categoryName": "string",
"categoryDesc": "string",
"categoryServicemodel": [
  {
    "serviceId": 2,
    "serviceName": "Test15",
    "serviceDesc": "test15",
    "isActive": 1
  }
],
"active": 0
 },
{
"categoryId": 4,
"categoryName": "carpenter",
"categoryDesc": "Carpenter",
"categoryServicemodel": [
  {
    "serviceId": 5,
    "serviceName": "Test Carpenter ",
    "serviceDesc": "Test carpenter Description",
    "isActive": 1
  }
  ],
"active": 0
 },
{
"categoryId": 6,
"categoryName": "Telecommunications service provider",
"categoryDesc": "TSPs provide access to telephone and related communications services",
"categoryServicemodel": [
  {
    "serviceId": 4,
    "serviceName": "ABC providers",
    "serviceDesc": "Providing all types of networks",
    "isActive": 1
  }
],
"active": 0
},
{
"categoryId": 7,
"categoryName": "Test Name",
"categoryDesc": "Test Description",
"categoryServicemodel": [
  {
    "serviceId": 6,
    "serviceName": "serv name test",
    "serviceDesc": "serv desc test",
    "isActive": 1
  }
],
"active": 0
},
{
"categoryId": 17,
"categoryName": "Test98",
"categoryDesc": "Test98",
"categoryServicemodel": [
  {
    "serviceId": 7,
    "serviceName": "Test98",
    "serviceDesc": "Test98",
    "isActive": 8
  }
],
"active": 8
 },
 {
"categoryId": 35,
"categoryName": "Test101",
"categoryDesc": "Test101",
"categoryServicemodel": [
  {
    "serviceId": 8,
    "serviceName": "Test101",
    "serviceDesc": "Test101",
    "isActive": 1
  }
],
"active": 1
 },
 {
"categoryId": 38,
"categoryName": "Test105",
"categoryDesc": "Test105",
"categoryServicemodel": [
  {
    "serviceId": 9,
    "serviceName": "Test105",
    "serviceDesc": "Test105",
    "isActive": 5
  }
],
"active": 5
},
{
"categoryId": 39,
"categoryName": "Network",
"categoryDesc": "Telecom",
"categoryServicemodel": [
  {
    "serviceId": 10,
    "serviceName": "Network one",
    "serviceDesc": "Network one",
    "isActive": 0
  }
],
"active": 0
}
]

This is my response in json

I have array in this format some categories has two categoryServicemodel some has only one how to display this json format in card i need all array to be displayed

This is my Component.html I have a values stored in rows now i need to display category name under that service name and description some category has two services some has only one how to display it

<div class="row">
   <div class="col-12 col-lg-4" *ngFor="let item of rows; let i=index;">
     <div class="card">
        <div class="list-author-widget-link"><h3><b>{{item.categoryName}}</b></h3></div>
       <div class="card-body">
           <div class="media">
              <span class="list-author-widget-link"><a >{{item.categoryServicemodel[i].serviceName}}</a></span><hr>
            <p>                        
             <span><i class="fa fa-building-o"></i><b>&nbsp; Service Name :</b></span><a>{{item.categoryServicemodel[i].serviceName}}</a><br><br>
             <span><i class="fa fa-envelope-o"></i><b>&nbsp; Service Description :</b></span><a>{{item.categoryServicemodel[i].serviceDesc}}</a>
            </p><hr>
           </div>
        </div>
     </div>
   </div>
</div>

This is my component.ts

export class ServiceComponent implements OnInit{

rows: any[];   

category: [''];
services: [''];
serviceModel: any[];
Categoryrows: any[];
serveName;
serveDesc;
categoryName: any[];

constructor(private router: Router,private service: PostGetService, private http: HttpClient){
    this.http.get(this.apiUrl[1])
    .subscribe((category: any) => {
        this.Categoryrows = category;
        console.log(this.Categoryrows);
    });
}

    ngOnInit(){

    this.service.getAllCategories()
        .subscribe(data => {
            this.rows = data.json();
            console.log(this.rows);                
        });
    }

I am displaying data like this but i need two cards with same category name one card can contain only one service details

please remove the picture and put code. If you can even create a stackbliz — Patricio Vargas
– Patricio Vargas, Commented Sep 20, 2018 at 4:25

Sanoj_V · Accepted Answer · 2018-09-20 05:16:29Z

1

You can do something like this:

<div class="row">
    <div class="col-12 col-lg-4" *ngFor="let item of rows; let i=index;">
        <div class="list-author-widget-link">
            <h3><b>{{item.categoryName}}</b></h3>
        </div>
        <hr/>
        <div class="card" *ngFor="let category of item?.categoryServicemodel">
            <div class="card-body">
                <div class="media">
                    <p>
                        <span><i class="fa fa-building-o"></i><b>&nbsp; Service Name :</b></span>
                        <a>{{category.serviceName}}</a><br><br>
                        <span><i class="fa fa-envelope-o"></i><b>&nbsp; Service Description :</b></span>
                        <a>{{category.serviceName}}</a>
                    </p>
                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>

here is working example: Stackblitz

answered Sep 20, 2018 at 5:16

Sanoj_V

2,9961 gold badge14 silver badges33 bronze badges

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

1 Comment

chethu Over a year ago

perfect. Thank you so much. this is what i was looking for thank you

jitender · Accepted Answer · 2018-09-20 05:13:07Z

1

you can simple put a loop inside loop like

 <div  *ngFor="let item of rows;" >
   <p>{{item.categoryName}}</p>
    <hr/>
   <div *ngFor="let category of item.categoryServicemodel">
     <p>Service Name:-{{category.serviceName}}</p>
     <p>Service Description:-{{category.serviceDesc}}</p>
   </div>
   <hr/>
</div>

edited Sep 20, 2018 at 5:13

answered Sep 20, 2018 at 4:39

jitender

10.4k1 gold badge21 silver badges49 bronze badges

2 Comments

chethu Over a year ago

its good but i need to display service details in separate card like first service details in one card second service details in another card

chethu Over a year ago

please see the question i had updated.......from what u have answered i can display all details in one card itself but i need to display it in separate card

Vineeth Sai · Accepted Answer · 2018-09-20 07:20:02Z

You can try something like this.

<div class="row">
    <div class="col-md-12 col-lg-4" *ngFor="let data of rows; let i=index;">
        <div class="list-author-widget-link">
            <h3><b>{{data.categoryName}}</b></h3>
        </div>
        <hr/>
        <div class="card" *ngFor="let category of data?.categoryServicemodel">
            <div class="card-body">
                <div class="media">
                    <p>
                        <span><i class="fa fa-building-o"></i><b>&nbsp; Service Name :</b></span>
                        <a>{{category.serviceName}}</a><br><br>
                        <span><i class="fa fa-envelope-o"></i><b>&nbsp; Service Description :</b></span>
                        <a>{{category.serviceName}}</a>
                    </p>
                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>

Collectives™ on Stack Overflow

How to display multiple value array in a card using angular 4

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related