2016-07-11 4 views
0

I`ve разобран этот код,Как разобрать json на угловом2?

[ 
    {"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", "список каналов", "storagelist" есть все в порядке, но "система" и "память" DonT разобран.

Это мой 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> 

Как разобрать этот JSON? С какой-то трубой? И как я могу разобрать «процессор» ?? Я знаю, что это que. очень популярен на stackovetflow, но я cants найти его с моей проблемой

ответ

1

Это потому, что ngFor принимает только массивы, а не объекты. Весь ваш объект разобран правильно, но system.memory не может быть обработан ...

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

Если вы хотите перебрать ключи в объекте, необходимо реализовать собственный канал.

Этот вопрос может помочь вам:

+0

я добавить эту трубу -> '@Pipe ({имя: 'ключи'}) класс KeyPipe реализует PipeTransform { преобразования (значение , args: string []): any { let keys = []; для (введите значение ключа) { keys.push (ключ); } ключи возврата; } } 'и добавьте в HTML это ->' <тр * ngFor = "пусть service_rec из system.memory | ключи"> {{}} service_rec.key ', но "память" не отображается –

+0

ли вам добавить класс KeyPipe в атрибут pipe компонента, в котором вы хотите его использовать? –

+0

Вы имеете в виду это: 'pipe: [ByteFormatPipe, KeyPipe]'? –