getting errors while displaying json format list in html it cannot be displayed

Question

I am facing some problems while displaying the json formatted data in html file. It work successfully but list is not displayed. This in my code...

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Hotspot, Network } from 'ionic-native';


@Component({
   selector: 'page-home',
   templateUrl: 'home.html'
})

export class HomePage {

 constructor(public platform: Platform){
   this.platform = platform
 }
   List(){
       Hotspot.scanWifi().then((networks:Array<Network>)=>{
       console.log(networks);
    });
  }
}

This is my HTML File

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button color="Primary" (click)="List()">ScanWifi</button>
  <div *ngFor="let network of networks">
  <ion-list>
    <ion-item>
       <h2>{{network}}</h2><br>
    </ion-item>
  </ion-list>
  </div>
</ion-content>

Please add your code in your question and not as images, thanks! — AT82, Jan 24 '17 at 12:19
please provide error message and line number, we can not fulfill your code — Alexey Obukhov, Jan 24 '17 at 12:24
my application created properly and it runs but didn't show wifi list — , Jan 24 '17 at 12:28

AT82 · Accepted Answer · 2017-01-24T13:25:46.610

1

You are just console logging your result, your current code:

List(){
  Hotspot.scanWifi().then((networks:Array<Network>)=>{
  console.log(networks);
});

You need to declare a local variable networks so that you can use it in the view as you have:

So your code should look something like this:

networks;

List(){
  Hotspot.scanWifi().then((networks:Array<Network>)=>{
  this.networks = networks;
});

so that you can refer to your networks in your view:

<div *ngFor="let network of networks">

EDIT: I first wrongfully "assumed" that Hotspot needed to be injected into the constructor, but by doing some research, I found out that Hotspot is a native element with methods, and can therefore be called just by Hotspot.scanWifi() as per can be seen here.

edited Jan 24 '17 at 13:25

answered Jan 24 '17 at 12:34

AT82

71,416
24
140
167

right.. missed the Hotspot.. and if that is missing how is this running smoothly? – Suraj Rao Jan 24 '17 at 12:36
@suraj .. "Running smoothly" cuz realized now the List-method is never called. Missed that as well as first ;) – AT82 Jan 24 '17 at 12:42
@suraj Undelete your answer, you were first with your answer and if just loggin results in console was only issue, your answer should be accepted and upvoted ;) (check last part in my answer) – AT82 Jan 24 '17 at 13:19
Uncaught (in promise): cordova_not_available this error occured now after changes – Jan 24 '17 at 13:40
That seems to be a whole other issue then, take a look at http://stackoverflow.com/questions/38744657/ionic-2-error-cordova-not-available if that might help... – AT82 Jan 24 '17 at 13:43
@AshishNikalje Would you mind accepting either answer if this solved your original issue ;) – AT82 Jan 27 '17 at 16:50

score 0 · Answer 2 · answered Jan 24 '17 at 12:32

You have to set networks array in the class

export class HomePage {
networks:any;
 constructor(public platform: Platform){
   this.platform = platform
 }
   List(){
       Hotspot.scanWifi().then((networks:Array<Network>)=>{
       console.log(networks);
       this.networks = networks;//or do forEach and push
    });
  }
}

getting errors while displaying json format list in html it cannot be displayed

2 Answers2