Angular 2 not printing JSON data

Question

I'm starter with Angular2 and i have a problem trying to display values on screen. I want to display a JSON value but it only shows this in console.

I passed variable from another typescript file and it works great but i want to show the property of the value and i don't know how to do it.

export class NodeInformesPage {
  dataInformes: string;
  node: number;

   constructor(public navCtrl: NavController, public navParams: NavParams, public nav: NavController, public http: Http) {
    this.node = this.navParams.get('node');
    this.dataInformes = 'https://www.exampleurl.com' + this.node + '.json';
    if (this.dataInformes) {
       this.http.get(this.dataInformes)
          .map(res => res.json())
          .subscribe(node => this.dataShow(node));
         }
    }

    dataShow(node) {
       if (node) {
           for (let id of node) {
              let node = node;
              node = id;
              this.node.uid.push(node);
           }      
           console.log(node.uid);
        }
     }

}

I got blank screen but the console showed me that the data is loaded like that:

{vid: "8484", uid: "358", title: "Estados Contables por el ejercicio finalizado el 31/12/2015",…}
changed
:
"1522785856"
cid
:
"0"
comment
:
"1"
comment_count
:
"0"
created
:
"1522785856"
current_revision_id
:
"8484"
data
:
"a:8:{s:16:"ckeditor_default";s:1:"t";s:20:"ckeditor_show_toggle";s:1:"t";s:14:"ckeditor_width";s:4:"100%";s:13:"ckeditor_lang";s:2:"en";s:18:"ckeditor_auto_lang";s:1:"t";s:17:"mimemail_textonly";i:0;s:18:"htmlmail_plaintext";i:0;s:7:"overlay";i:1;}"
field_archivos_del_informes
:
{und: [,…]}
field_descripcion
:
[]
field_destacado
:
{und: [{value: "No"}]}
field_etiquetas
:
[]
field_fecha
:
{und: [{value: "2018-01-01 00:00:00", timezone: "America/Argentina/Buenos_Aires",…}]}
field_imagenes
:
{und: [{fid: "17436", uid: "358", filename: "030.jpg", uri: "public://informes/images/030.jpg",…}]}
field_n_de_informe
:
{und: [{value: "035", format: null, safe_value: "035"}]}
field_organismo_auditado_mobile
:
{und: [{value: "Casa de Moneda SE"}]}
field_sociedad_civil
:
[]
field_subtitulo
:
[]
field_tipo_de_informe
:
{und: [{value: "Estado Contable"}]}
is_current
:
true
is_pending
:
false
language
:
"es"
last_comment_name
:
null
last_comment_timestamp
:
"1522785856"
last_comment_uid
:
"358"
log
:
""
name
:
"Brian"
nid
:
"8761"
num_revisions
:
"1"
path
:
"https://www.exampleurl.com/estados-contables-por-el-ejercicio-finalizado-el-31122015-4"
picture
:
"0"
print_epub_display
:
0
print_epub_display_comment
:
0
print_epub_display_urllist
:
0
print_html_display
:
0
print_html_display_comment
:
0
print_html_display_urllist
:
0
print_pdf_display
:
0
print_pdf_display_comment
:
0
print_pdf_display_urllist
:
0
print_pdf_orientation
:
""
print_pdf_size
:
""
promote
:
"0"
revision_moderation
:
false
revision_timestamp
:
"1522785856"
revision_uid
:
"358"
status
:
"1"
sticky
:
"0"
title
:
"Estados Contables por el ejercicio finalizado el 31/12/2015"
tnid
:
"0"
translate
:
"0"
type
:
"informes"
uid
:
"358"
uuid
:
"d73e28cd-bc50-4218-a648-0f517d32d7a1"
vid
:
"8484"
vuuid
:
"8166cd62-2e32-47d1-979a-7f3aea18b832"

Obviously the console prints the string "358". I hope you can help me. Thanks in advance.

UPDATE: Forgot my HTML5 View. It's simple, {{node}} displays the data but {{node.uid}} does not.

 <ion-content>
 <ion-list>
       <span>{{node.uid}}</span>
 </ion-list>
</ion-content>

Answer 1

I agree with Jedi Schmedi. You use the name 'node' for different types throughout your class. Stop it! That's misleading, unreadable and you struggle yourself with your code as it is error prone.

The only 'node' your HTML is currently binding to is

node: number;

Nothing else. That's why

   <span>{{node}}</span>

shows a value but

   <span>{{node.uid}}</span>

does not.

Rafactor your code, for example, this way:

node: any;

if (this.dataInformes) {
   this.http.get(this.dataInformes)
      .map(res => res.json())
      .subscribe(result => this.dataShow(result));
     }
}

dataShow(new_node_object) {
   if (new_node_object) {
       for (let id of new_node_object) {
          this.node.uid.push(id);
       }      
       console.log(this.node.uid);
    }
}


<ion-content>
   <ion-list>
     <span>{{node?.uid}}</span>
   </ion-list>
</ion-content>