title: fetch data from json for p-dropdown
body: <p>I am using p-dropdown for displaying the country list and select country.so I am getting error at data.length saying that Operator '&lt;' cannot be applied to types 'number' and 'Observable'.I don't know how to solve this error.I am new to angular.please give solution.</p>
  
  <pre><code>Countries:SelectItem[];
  
  
  this.Countries.push({ label: 'Select Item', value: -1});
  
  var data =  this.http.get('app/form/country.json')
  
  for(let i = 0; i&lt; data.length; i++) {
  
       this.Countries.push({label: data[i].Country, value: data[i].Name});
  }
  </code></pre>
  
  <p>contact.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { SelectItem } from 'primeng/api';
  import { CountryService } from './country-list.service';
  import { StateService } from './state-list.service';
  import { CityService } from './city-list.service';
  import { Message } from 'primeng/components/common/api';
  import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
  import { PersonListService,Address, Email, ContactNumber} from './person-list.service';
  import { HttpClient } from '@angular/common/http';
  
  @Component({ 
    moduleId: module.id,
    selector: 'sd-contactform',
    templateUrl: 'contactform.component.html',
    styleUrls: ['contactform.component.css']
  })
  export class ContactFormComponent implements OnInit {
  
    addresses: Address[];
    addresstype: Array&lt;String&gt;=[''];
    states:Array&lt;String&gt;=[''];
    countries:Array&lt;String&gt;=[''];
    errorMessage: any;
    Countries:SelectItem[];
    Country:string;
    emails:Email[];
    contactnumbers:ContactNumber[];     
    date3: Date;
    dates: Date[];
    rangeDates: Date[];
    minDate: Date;
    maxDate: Date;
    es: any;
    invalidDates: Array&lt;Date&gt;;
    val2: string = 'Male';
    val3: string = 'Unmarried';
    text: string;
    ValidIds: SelectItem[];
    selectedvalidid2: string = '';
    Religions: SelectItem[];
    selectedvalidid3: string = '';
    BloodGroups: SelectItem[];
    selectedvalidid4: string = '';
    AddressTypes: SelectItem[];
    selectedvalidid5: string = '';
    EmailTypes: SelectItem[];
    emailtype:Array&lt;String&gt;=[''];
    contacttype:Array&lt;String&gt;=[''];
    ContactTypes: SelectItem[];
    country: any;
    filteredCountriesSingle: any[];
    filteredStatesSingle: any[];
    city: any;
    filteredCitiesSingle: any[];
    msgs: Message[] = [];
    address: FormGroup;
    email: FormGroup;
    contact: FormGroup;
    submitted: boolean;
    i:number;
    data: any;
  
  
    constructor(public personListService:PersonListService,private countryService: CountryService,private http: HttpClient,private stateService: StateService,private cityService: CityService,private fb: FormBuilder) { }
  
    filterCountrySingle(event) {
        let query = event.query;
        this.countryService.getCountries().then(countries =&gt; {
            this.filteredCountriesSingle = this.filterCountry(query, countries);
        });
    }
  
    filterCountry(query, countries: any[]):any[] {
  
      let filtered : any[] = [];
      for(let i = 0; i &lt; countries.length; i++) {
          let country = countries[i];
          if(country.country.toLowerCase().indexOf(query.toLowerCase()) == 0) {
              filtered.push(country);
          }
      }
      return filtered;
  }
  
  filterStateSingle(event) {
      let query = event.query;
      this.stateService.getStates().then(states =&gt; {
          this.filteredStatesSingle = this.filterState(query,states);
      });
  }
  
  filterState(query,states: any[]):any[] {
  
    let filtered : any[] = [];
    for(let i = 0; i &lt; states.length; i++) {
        let state = states[i];
        if(state.state.toLowerCase().indexOf(query.toLowerCase()) == 0) {
            console.log(state)
            console.log(filtered)
            filtered.push(state);
        }
    }
    return filtered;
  }
  
  filterCitySingle(event) {
      let query = event.query; 
      this.cityService.getCitys().then(cities =&gt; {
          this.filteredCitiesSingle = this.filterCity(query,cities);
      });
  }
  
  filterCity(query,cities: any[]):any[] {
  
    let filtered : any[] = [];
    for(let i = 0; i &lt; cities.length; i++) {
        let city = cities[i];
        if(city.city.toLowerCase().indexOf(query.toLowerCase()) == 0) {
          console.log(city);
          filtered.push(city);  
        }
    }
    return filtered;
  }
  
    ngOnInit() {
  
      this.getperson();
  
      this.address = this.fb.group({
          'addresstype': new FormControl('', Validators.required),
          'addressl1': new FormControl('', Validators.required),
          'addressl2': new FormControl('', Validators.required),
          'state1': new FormControl('', Validators.required),
          'locality': new FormControl('', Validators.required),
          'city': new FormControl('', Validators.required),
          'country': new FormControl('', Validators.required),
          'postalcode': new FormControl('', Validators.required)  
      }
  );
  
      this.email = this.fb.group({
          'emailtype': new FormControl('', Validators.required),
          'emailid': new FormControl('', [Validators.required,
          Validators.pattern("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$")] )
      }
  );
  
      this.contact = this.fb.group({
          'contacttype': new FormControl('', Validators.required),
          'countrycode': new FormControl('', Validators.required),
          'regioncode': new FormControl('', Validators.required),
          'mobileno': new FormControl('', [Validators.required,Validators.minLength(10),Validators.maxLength(10)])
      }
  );
      this.AddressTypes = [
        {label: 'Native', value: 'Native'},
        {label: 'Temporary', value: 'Temporary'},
        {label: 'Permanent', value: 'Permanent'},
        {label: 'Careof', value: 'Careof'}  
    ];
  
    this.EmailTypes = [
      {label: 'Personal', value: 'Personal'},
      {label: 'Office', value: 'Office'}  
  ];
  
      this.ContactTypes = [
          {label: 'Home', value: 'Home'},
          {label: 'Office', value: 'Office'}
  ];
  
  var data = [];
  this.Countries=[];
  this.Countries.push({ label: 'Select Item', value: -1})
  
  this.http.get('app/form/country.json')
    .subscribe(data =&gt; this.data = data, // success path
    error =&gt; this.errorMessage = error // error path
  );
  for(let i = 0; i&lt;this.data.length ; i++) {
       //the property after data[i]. needs to match the exact name that is on your JSON file... So, name is a different property than Name
       this.Countries.push({label: this.data[i].country, value: this.data[i].Value});
       console.log(this.data[i].Value)
  }
  
  }
  
      onSubmit(value: string) {
          this.submitted = true;
          this.msgs = [];
          this.msgs.push({severity:'info', summary:'Success', detail:'Form Submitted'});
      }
  
      getperson(){
          this.personListService.getAddress()
           .subscribe(
            resp =&gt; {
            this.addresses = resp.Addresses
            var i;
            for(i=0;i&lt;this.addresses.length;i++)
            {
              this.states[i]=this.addresses[i].State
              //this.countries[i]=this.addresses[i].Country
             this.addresstype[i]=this.addresses[i].AddressType
            }
            console.log(this.addresstype)
            console.log(this.states)
            console.log(this.countries)
            console.log(this.addresses)
            });
  
          this.personListService.getEmail()
           .subscribe(
            resp =&gt;{
              this.emails = resp.Emails
              var i;
              for(i=0;i&lt;this.emails.length;i++)
              {
               this.emailtype[i]=this.emails[i].EmailType
              }
            console.log(this.emails.length)
          }    
          );
  
           this.personListService.getContact()
           .subscribe(
            resp =&gt; {
            this.contactnumbers = resp.ContactNumbers
            var i;
            for(i=0;i&lt;this.contactnumbers.length;i++)
            {
  
             this.contacttype[i]=this.contactnumbers[i].ContactType
  
          }
             //resp =&gt; this.addresses = resp.Addresses,
             error =&gt; this.errorMessage = &lt;any&gt;error
      }
           ); 
         }
      }
  </code></pre>
  
  <p>I added code of compnent.ts file. please check and I am getting error as ERROR TypeError: Cannot read property 'length' of undefined at data.length so please tell what is wrong?          </p>