How to parse json on angular2?

Question

i`ve parsed this code,

[
  {"nodename":"192.124.105.55",
   "servicelist":[
      {
         "id":"ec9471ec001c10b9fa286e1f52e39c5dc9485a7c2cfbf55145c26242bb98ec4d",
         "name":"Nginx",
         "status":"Online",
         "servicecontrolled":true
       },
       {
          "id":"f4ca9e0badc6b23e3e36444bd7ee4a9efcd39de8e0bb4cdecb25b5a02ef86ba5",
          "name":"Memcached",
          "status":"Offline",
         "servicecontrolled":true        
       },
        {
          "id":"0a4bf3b5bb5f47ece9284052389ae02f6c9dba989ca34086a30e049ee3d8eb47",
          "name":"Celery",
          "status":"Offline",
         "servicecontrolled":true
         }
     ],
  "storagelist":
  [
     {
       "mountpoint":"/",
       "total":188,
       "used":28,
       "free":161
    },
   {
       "mountpoint":"/boot",
       "total":235,
       "used":106,
       "free":129
     }
  ],
 "system":
 {
      "memory":
     {
        "total":33673834496,
        "used":14725959680,
        "free":18947874816,
        "actualfree":24221499392,
        "actualused":9452335104,
        "swaptotal":34296819712,
        "swapused":0,
        "swapfree":34296819712
       },
      "uptime":" 4:09",
       "loadaverage":"0.91 0.49 0.54",
       "cpu":
              {
                   "vendor":"GenuineIntel",
                   "family":"6",
                   "model":"Intel(R) Xeon(R) CPU           E5620  @ 2.40GHz",
                   "rate":"2399.971",
                   "numofcores":2
               }
   }
 },
   {"nodename":"192.124.105.58",
     "servicelist":[
       {"id":"428d3cc1d4d7218d6b9d1a80152179fac0aba40e2eee5525befe1355919db5e6",
        "name":"Nginx",
        "status":"Online"
        },
        {
          "id":"9f71381ff2e2181b4dde841e85d7d29af33fc2bd1929092aedf237d124ae75e0",
          "name":"Memcached",
          "status":"Online"
        },
        {
          "id":"c7dc289c490b8087d47971a45d545fcbbf7f425b1087179ae4a05c585c859302",
          "name":"gunicorn",
          "status":"Online"
         },
         {
           "id":"a96c90d2423c4e300d8d1d83b2e4dfdd70af9ca0ae91bdba35a66dd9ffa2f572",
           "name":"test",
           "status":"Offline"
          }
        ],
        "storagelist": [],
        "system":
         {
              "memory":
              {
                   "total":12425734566,
                   "used":4725959680,
                  "free":8947874816,
                  "actualfree":4221499392,
                 "actualused":452335104,
                 "swaptotal":4296819712,
                 "swapused":0,
                 "swapfree":4296819712
               },
               "uptime":" 12 days,  4:09",
               "loadaverage":"0.00 0.00 0.00",
              "cpu":
              {
                   "vendor":"GenuineIntel",
                   "family":"6",
                   "model":"Intel(R) Xeon(R) CPU           E5620  @ 2.40GHz",
                   "rate":"2399.971",
                   "numofcores":4
               }
             }
   }
]

"nodename", "servicelist", "storagelist" is everything OK, but "system" and "memory" dont parsed.

This is my html ->

<h1> Мониторинг сервисов (M.S.A) </h1>
    <table class="table table-bordered" *ngFor="let list of lists">
    <caption>{{ list.nodename }}</caption>
    <thead>
       <tr>
           <th>Название сервиса</th>
           <th></th>
           <th>Операции</th>  
           <th>Статус</th>   
        </tr>
      </thead>
      <tbody>
            <tr *ngFor="let service_rec of list.servicelist">
                <td> {{ service_rec.name }} </td>
                <td></td>
                <td></td>
                <td style="width: 15%">
                     <span [style.background-color]="service_rec.status == 'Online' ? 'green' : 'red'"
                     class="label label-default">
                     {{ service_rec.status }}
                     </span>
                </td>      
            </tr>
      </tbody>
      <thead>
              <tr>
                  <th>Файловая система</th>
                  <th>Всего</th>
                  <th>Использовано</th>
                  <th>Доступно</th>
              </tr>
          </thead>
          <tbody>
              <tr *ngFor="let service_rec of list.storagelist">
                  <td> {{ service_rec.mountpoint }} </td>
                  <td> {{ service_rec.total | byteFormat }} </td>
                  <td> {{ service_rec.used | byteFormat }} </td>
                  <td> {{ service_rec.free | byteFormat }} </td>
              </tr>
          </tbody>
          <thead>
                <tr>
                    <th>Общая память</th>
                    <th>Общая используемая память</th>
                    <th>Свободная память</th>
                    <th>Используемая память размера подкачки</th>
                </tr>
          </thead>
          <tbody>
              <tr *ngFor="let perem of system.memory">
                  <td> {{perem.total}} </td>
                  <td> {{perem.actualused}} </td>
                  <td> {{perem.actualfree}} </td>
                  <td> {{perem.swapused}} </td>
              </tr>
          </tbody>
      </table>

How to parse this json? With some pipe? And how i can parse "cpu"?? I know that this que. is very popular on stackovetflow, but i cants find it with my problem

Community · Accepted Answer · 2017-05-23 12:09:46Z

1

It's because ngFor only accepts arrays and not objects. All your object is correctly parsed but the system.memory can't be handled...

"system": {
  "memory": { (...) } // <----- object

If you want to iterate over keys in the object, you need to implement a custom pipe.

This question could help you:

access key and value of object using *ngFor

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Jul 11, 2016 at 13:26

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

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

8 Comments

Eduard Arevshatyan Over a year ago

i add this pipe ->

@Pipe({name: 'keys'}) class KeyPipe implements PipeTransform {     transform(value, args:string[]) : any {         let keys = [];         for (let key in value) {             keys.push(key);         }         return keys;     } }

and add in html this -> <tr *ngFor="let service_rec of system.memory | keys"> <td>{{ service_rec.key }}</td>, but "memory" not display

Thierry Templier Over a year ago

Do you add the KeyPipe class into the pipes attribute of the component where you want to use it?

Eduard Arevshatyan Over a year ago

you mean this: pipes: [ByteFormatPipe, KeyPipe]?

Thierry Templier Over a year ago

Yes it's exactly what I mean ;-)

Eduard Arevshatyan Over a year ago

i have this error -> Cannot read property 'memory' of undefined

|

Collectives™ on Stack Overflow

How to parse json on angular2?

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related