Getting [Object object] while displaying data in angular

Question

I'm building an ionic application and I am not able to fetch data correctly. Getting this [Object object] and undefined while trying to access data using HTTP service. Any help will be appreciated. Thank you. PHP file:

<?php
header('Access-Control-Allow-Origin: *');  
$dbhost = "127.0.0.1";
$dbuser = "root";
$dbpass = "******";
$db = "dbPlants"; 
$con = mysqli_connect($dbhost,$dbuser,$dbpass,$db);
class disease{
    var $id;
    var $name;
    var $sciname;
    var $cause;
}
$sqldata = mysqli_query($con,"SELECT * FROM tbldiseases");
$diseases=array();
while($row = mysqli_fetch_array($sqldata, MYSQLI_ASSOC))
{   
    $dis=new disease();
    $dis->id=$row["Diseasesid"];
    $dis->name=$row["name"];
    $dis->sciname=$row["ScientificName"];
    $dis->cause=$row["cause"];
    $diseases[]=$dis;
    /*$diseases[] = array($row["Diseasesid"],$row["name"],$row["ScientificName"],$row["cause"]);*/
}
echo json_encode($diseases);

mysqli_close($con);
?>

disease.service.ts file:

import {Injectable} from "@angular/core"
import {Disease} from "./disease"
import {Http, Response} from "@angular/http"
import {Observable} from 'rxjs/Observable'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/catch'

@Injectable()
export class DiseaseService{
constructor(private http:Http){

}
getDiseases():Observable<Disease[]>
{
    return this.http.get('http://localhost/HowzMyPlant/hello.php').map(this.extractData)
    .catch((error:any)=>Observable.throw(error.json().error || 'Server error'));
}

private extractData(res:Response){
    let body=res.json();
    return body || [];
}
}

Disease.ts file:

export class Disease{
constructor(public Id:number,
public Name:string,
public ScientificName:string,
public Cause:string){
}
}

libraryscreen.html file:

<!DOCTYPE html>
<html>
<body>
<ion-content style="margin-top:70px;margin-bottom:90px">
    <div style="font-size:20px;font-weight:bold;margin-left:20px;color:darkgreen">
        All Diseases
    </div>
    <ion-list *ngFor="let dis of diseases">
        <ion-item (click)="getDiseaseInfo(dis.Name) ">
            <div style="display:inline-block ">
                <img src="no " ion-fab/>
            </div>
            <div style="display:inline-block ">
                <div>
                    {{dis.Name}}
                </div>
                <div>
                    {{dis.ScientificName}}
                </div>
                <div>
                    {{dis.Cause}}
                </div>
            </div>
        </ion-item>
    </ion-list>
</ion-content>

Component class:

@Component({
selector:'library-screen',
templateUrl:'libraryscreen.html',
providers:[DiseaseService]

})
export class LibraryScreenComponent implements OnInit{
public diseases : Disease[];
constructor(private diseaseService   : DiseaseService){
}


 ngOnInit(){
       this.diseaseService.getDiseases()
       .subscribe(dis=>{
           this.diseases=dis
          });
    }
    getDiseaseInfo(id:string){
       alert(id);
       }
    }

I am calling PHP service and trying to create ion-items with the received records of data. Please help.

Answer 1

User Object not array to Store reponse

@Component({
    selector:'library-screen',
    templateUrl:'libraryscreen.html',
    providers:[DiseaseService]

    })
    export class LibraryScreenComponent implements OnInit{
    public diseases : Disease={};
    constructor(private diseaseService   : DiseaseService){
    }


     ngOnInit(){
           this.diseaseService.getDiseases()
           .subscribe(dis=>{
               this.diseases=dis
              });
        }
        getDiseaseInfo(id:string){
           alert(id);
           }
        }

Getting [Object object] while displaying data in angular

Question

1 answers

solution1
0 2018-09-18 10:33:38

Getting [Object object] while displaying data in angular

Question

1 answers

solution1 0 2018-09-18 10:33:38

solution1
0 2018-09-18 10:33:38