Populate citi name based on Country Name in angular4?

Question

I want to get cities in select box when I click the country name in a drop down list. I could display county in the first select box, but second select box is showing empty.

I tried with http.. I want a simple method. Anyone please help.

here is what i tried..

json data file (file.json)

[
    {
        "countryName": "India",
        "cities": [
        {
            "id": 1,
            "name": "Banglaore",
            "founded": -200,
            "beautiful": true,
            "data": 123,
            "keywords": ["Kaveri", "River"]
        },
        {
            "id": 1,
            "name": "Pune",
            "founded": 0,
            "beautiful": false,
            "data": "no",
            "keywords": ["FSDF", "FS"]
        }
        ]
    },
    {
        "countryName": "US",
        "cities": [
        {
            "id": 2,
            "name": "CA",
            "founded": -200,
            "beautiful": true,
            "data": 123,
            "keywords": ["RT", "SSF"]
        },
        {
            "id": 2,
            "name": "NY",
            "founded": 0,
            "beautiful": false,
            "data": "no",
            "keywords": ["GSG", "DG"]
        }
        ]
    }
]

app.component.ts

import { Component } from '@angular/core';
import { Http,Response } from '@angular/http';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private http: Http) { }
public myData;
public str1;

ngOnInit(){

 this.http.get("assets/file.json")
  .map((res:Response)=> res.json())
  .subscribe(data =>{this.myData = data})
}

app.component.html

<form name="countryForm">
    <select class="form-control" id="country" formControlName="country">
        <option value="default">--Select a country--</option>
        <option *ngFor="let d of myData" [value]="d"> {{d.countryName}} </option>
    </select>
    <select>
        <option value="0">--All--</option>
        <option *ngFor="let f of myData.cities">{{f.cities.name}}</option>
    </select>
</form>

Damian · Accepted Answer · 2018-05-02 09:52:47Z

0

You could try something like this:

 <form  name ="countryForm">
    <select #country class="form-control" id="country" formControlName="country">
        <option value="default">--Select a country--</option>
        <option *ngFor="let d of myData" [value]="d"> {{d.countryName}} </option>
    </select> 
  <select  >
     <option value="0">--All--</option>
     <option *ngFor="let city of country.value" [value]="city" >{{city.name}}</option>
  </select>
        </form>

Check similar question answer https://stackoverflow.com/a/50113538/9722237

answered May 2, 2018 at 9:52

Damian

1086 bronze badges

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

Collectives™ on Stack Overflow

Populate citi name based on Country Name in angular4?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related