0

I have a rest api call in my angular 2 application which returns JSON. The JSON looks like this

[
  {"devID": "573965739","time": 1500580511805,"service": "demoservice,"version": "1.0.9"},
  {"devID": "573965739","time": 1500562423568,"service": "runservice","version": "1.0.8"},
  {"devID": "573965739","time": 1500562421146,"service":"timeservice","version": "1.0.4"},
  {"devID": "573965739","time": 1500562066888, "service": "testservice","version": "1.0.3"},
  {"devID": "111165739","time": 1500580511805,"service": "demoservice,"version": "2.0.9"},
  {"devID": "111165739","time": 1500562423568,"service": "runservice","version": "2.0.8"},
  {"devID": "111165739","time": 1500562421146,"service":"timeservice","version": "2.0.4"},
  {"devID": "111165739","time": 1500562066888, "service": "testservice","version": "2.0.3"}]

I want to loop through this JSON and display cards/tiles using angular material md-card. How do I map one "devID" with multiple key values and display in the card? For e.g The first card should contain this devID (573965739) and all the four services and versions linked to it and the second card with this devID (111165739) and its four services and versions linked to it. So, basically each card should contain unique devID and all the services and versions linked to it.

user2301
  • 1,857
  • 6
  • 32
  • 63
  • @Jota.Toledo Trying to find suitable data structure where one object can have multiple key-value pairs and loop through it. Something like HashTable in c# – user2301 Jul 21 '17 at 09:17
  • That still doesn't answer my question, if you have some c# background, you now that what you are looking for is the equivalent of groupBy for typescript/js. Look for that in google and you should come to some possible solutions – Jota.Toledo Jul 21 '17 at 09:28

1 Answers1

2

I found this great answer by @yurzui for grouping data by a field. Using the group-by.pipe he provided, you can pipe your data and render it on md-card.

html: 

<div>
  <div *ngFor="let item of data | groupBy:'devID' ">
    <md-card class="z-depth" style="margin-bottom: 10px" >

      <md-card-header>
       <md-card-title><h3>Dev Id: {{ item.key }}</h3></md-card-title>
      </md-card-header>

      <md-card-content>
        <div *ngFor="let x of item.value"> {{ x | json }}</div>
      </md-card-content>  

    </md-card>
  </div>
</div>

Plunker demo

Nehal
  • 13,130
  • 4
  • 43
  • 59
  • I tried to implement pipe and I get this error `Argument of type '{ providers: typeof ServiceVersion[]; templateUrl: string; pipes: typeof GroupByPipe[]; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'pipes' does not exist in type 'Component'.` – user2301 Jul 25 '17 at 11:38
  • [Here](https://stackoverflow.com/questions/39539085/angular-2-0-release-pipes-and-directives-are-not-properties-of-component-anymo) is answer for the exact same error you are getting. You can also check out the [Plunker example](https://plnkr.co/edit/RYMFQCmf7kZiPEn8W2hH?p=preview) I provided, to see how the Pipe is setup and used in the component. – Nehal Jul 25 '17 at 12:03
  • Hi, I am using Typescript - 2.2.2, this syntax is for typescript 1.7? I am getting some Typescript error – user2301 Jul 25 '17 at 12:04
  • I have updated the Pipe code and tested in TS 2.3.4, please check the plunker demo again to get the new code. – Nehal Jul 25 '17 at 12:09