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>

Please provide your html so we can see how you're trying to bind to the data in the template to display it. — Narm
– Narm, Commented Apr 11, 2018 at 17:53
I updated my post @Narm but I think that the problem is in the controller but i don't know... — HomerO
– HomerO, Commented Apr 11, 2018 at 18:08

score 2 · Accepted Answer · 2018-04-11 18:37:01Z

2

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>

edited Apr 11, 2018 at 18:37

answered Apr 11, 2018 at 18:33

user6749601

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

2 Comments

HomerO Over a year ago

I did read your code and i noticed that i implemented the subscribe wrong... I didn't test it yet but I marked as correct.

user6749601 Over a year ago

Just one more comment. If you know what a node-object looks like, it would be good practice to define a model of it in order to be able to instantiate an object of this type and address the field 'uid' typesafe.

Collectives™ on Stack Overflow

Angular 2 not printing JSON data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related