Angular how to extract and display specific JSON data based on country name using click function

I have JSON format data as below.

 const period: Data[] = [
 {
   name: "Germany",
   id: 1,
   data: [
     { date0: "2015-01-28", date1: "2015-02-04" },
     { date0: "2015-08-27", date1: "2015-09-07" },
     { date0: "2015-12-24", date1: "2016-01-05" }
},
{
   name: "France",
   id: 2,
   data: [
     { date0: "2015-01-28", date1: "2015-02-04" },
     { date0: "2015-08-27", date1: "2015-09-07" },
     { date0: "2015-12-24", date1: "2016-01-05" }

I can call the service in my method to get all of this data.

   {
    this.admissionService.getAdmissions().subscribe(perioddata =>
      {
    this.admission = [perioddata]
    
   )};

However i only want call data based on name of the country by implementing onValueChanged($event)

 onValueChanged(data) {
    this.admission.filter(['country', '=', data.value]);
}

<dx-select-box
            id="selectbox"
            displayExpr="name"
            (onValueChanged)="onValueChanged($event)"
        ></dx-select-box>

Basically my front end is that, i select a country from the list and it should call data based on country name.

If your data of method onValueChanged is some country, then you can filter your array of period:

onValueChanged(data) {
    this.period.filter(f => f.name == data);
}

An example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const period = [
    {
        name: "Germany",
        id: 1,
        data: [
            { date0: "2015-01-28", date1: "2015-02-04" },
            { date0: "2015-08-27", date1: "2015-09-07" },
            { date0: "2015-12-24", date1: "2016-01-05" }
        ]
    },
    {
        name: "France",
        id: 2,
        data: [
            { date0: "2015-01-28", date1: "2015-02-04" },
            { date0: "2015-08-27", date1: "2015-09-07" },
            { date0: "2015-12-24", date1: "2016-01-05" }
        ]
    }
];

event = 'France';
const result = period.filter(f => f.name == event);
console.log(result);

<!-- end snippet -->

Can you do:

onValueChanged(event) {
   const country = event.target.value;
   this.admissionService.getAdmissions().pipe(
    // get the object in concern (let's say the Germany slice)
     map(countriesData => countriesData.find(countryData => countryData.name === 
          country)),
    // get the data array from the object in concern
    map(countryData => countryData.data),
   ).subscribe(dataArrayForCountry => {
     // do whatever you need, at this point I am just logging it.
     console.log(dataForCountry);
  });
}

If you're using an older version of RxJs, it should be:

this.admissionService.getAdmissions()
    .map(countriesData => countriesData.find(countryData => countryData.name === country))
    .map(countryData => countryData.data)
    .subscribe(dataArrayForCountry => {
      console.log(dataArrayForCountry);
  });