Unable to show data on page from variable

Question

My html page is not showing data from my component.ts file. The variable console.log(array_no1); is holding the objects, I want to show its array_no1["title"] value on html page in a table. Attaching the console.log picture:

My slist.component.ts below

import { Component, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

declare let $: any;

@Component({
  selector: 'app-showlist',
  templateUrl: './showlist.component.html',
  styleUrls: ['./showlist.component.css']
})
export class ShowlistComponent implements OnInit {

constructor(@Inject(DOCUMENT) private document: any) {}

  ngOnInit() {

 var keys = Object.keys(localStorage).filter(function(key) {
  return /^section\d+$/.test(key);
});

var dataArray = keys.map(function(key) {
 return JSON.parse(localStorage.getItem(key));
});


for(var i=0;i<dataArray.length;i++){
    var array_no = dataArray[i];
}
var array_no1 = dataArray;
console.log(array_no1);
  }

}

My slist.component.html

<tr *ngFor="let item of array_no1">
  <td>{{item}}</td>
  </tr>

Basically I want the title's each in 1 row.

Priyesh Kumar · Accepted Answer · 2017-05-27 14:14:19Z

That is because array_no1 is defined in local scope of ngOnInit() function. You need to specify array_no1 using this operator.

Try following

 @Component({
   selector: 'app-showlist',
   templateUrl: './showlist.component.html',
   styleUrls: ['./showlist.component.css']
 })
 export class ShowlistComponent implements OnInit {

   constructor(@Inject(DOCUMENT) private document: any) {
     this.array_no1 = [] // <= this is important
   }

   ngOnInit() {

     var keys = Object.keys(localStorage).filter(function(key) {
       return /^section\d+$/.test(key);
     });

     var dataArray = keys.map(function(key) {
       return JSON.parse(localStorage.getItem(key));
     });

     this.array_no1 = dataArray;
     console.log(this.array_no1);
   }

   go_to_editsection(index) {
     // You cannot access index of the item clicked directly
     // Instead you need to pass index specifically, as above
     console.log("lets edit");
     console.log(this.array_no1[index]);
   }
   `


 }

HTML

<tr *ngFor="let item of array_no1; let i = index">
  <td>{{item.title}}
    <input id="edit" type="button" name="edit" value="Edit" (click)="go_to_editsection(i)" />
    <br> </td>
</tr>

i added a click button like this ` <tr *ngFor="let item of array_no1"> <td>{{item.title}} <input id="edit" type="submit" name="edit" value="Edit" (click)="go_to_editsection()" /> <br><br> </td> </tr>` how can i find the clicked button's index in my table with respect to {{array_no1.title}}, please guide. This is how my page looks - dropbox.com/s/etqtklvtzt56dan/…
In my slist.component.ts file, this is not working ` go_to_editsection(){ console.log("lets edit"); console.log(this.array_no1.index); }`

Collectives™ on Stack Overflow

Unable to show data on page from variable

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related