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

score 1 · Accepted Answer · edited May 23 '17 at 12:09

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 '17 at 12:09

Community

1
1

answered Jul 11 '16 at 13:26

Thierry Templier

198,364
44
396
360

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 -> ` {{ service_rec.key }}`, but "memory" not display – Eduard Arevshatyan Jul 12 '16 at 12:18
Do you add the KeyPipe class into the pipes attribute of the component where you want to use it? – Thierry Templier Jul 12 '16 at 15:56
you mean this: `pipes: [ByteFormatPipe, KeyPipe]`? – Eduard Arevshatyan Jul 13 '16 at 06:46
Yes it's exactly what I mean ;-) – Thierry Templier Jul 13 '16 at 07:24
i have this error -> `Cannot read property 'memory' of undefined` – Eduard Arevshatyan Jul 13 '16 at 07:42
I think that it's because you load your data asynchronously. So they are undefined at the beginning. You could use the Elvis operator to fix that. Here is a sample: – Thierry Templier Jul 13 '16 at 07:53
OK, i`ve add "?" before the system, but now data still not displayed – Eduard Arevshatyan Jul 13 '16 at 07:56
maybe wrong this line ``?? or this `{{ perem.key }}`, and i would to display system -> memory -> total on my json – Eduard Arevshatyan Jul 13 '16 at 08:00

How to parse json on angular2?

1 Answers1