Angular如何使用点击功能提取和显示特定国家名称的JSON数据。

huangapple
go评论110阅读模式
英文:

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

问题

我有以下JSON格式的数据。

  1. const period: Data[] = [
  2. {
  3.   name: "Germany",
  4.   id: 1,
  5.   data: [
  6.     { date0: "2015-01-28", date1: "2015-02-04" },
  7.     { date0: "2015-08-27", date1: "2015-09-07" },
  8.     { date0: "2015-12-24", date1: "2016-01-05" }
  9. },
  10. {
  11.   name: "France",
  12.   id: 2,
  13.   data: [
  14.     { date0: "2015-01-28", date1: "2015-02-04" },
  15.     { date0: "2015-08-27", date1: "2015-09-07" },
  16.     { date0: "2015-12-24", date1: "2016-01-05" }
  17. }];

我可以在我的方法中调用服务来获取所有这些数据。

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

但我只想根据国家名称调用数据，通过实现onValueChanged($event)方法。

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

基本上，我的前端是这样的，我从列表中选择一个国家，它应该根据国家名称调用数据。

英文:

I have JSON format data as below.

  1.  const period: Data[] = [
  2.  {
  3.    name: "Germany",
  4.    id: 1,
  5.    data: [
  6.      { date0: "2015-01-28", date1: "2015-02-04" },
  7.      { date0: "2015-08-27", date1: "2015-09-07" },
  8.      { date0: "2015-12-24", date1: "2016-01-05" }
  9. },
  10. {
  11.    name: "France",
  12.    id: 2,
  13.    data: [
  14.      { date0: "2015-01-28", date1: "2015-02-04" },
  15.      { date0: "2015-08-27", date1: "2015-09-07" },
  16.      { date0: "2015-12-24", date1: "2016-01-05" }

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

  1.    {
  2.     this.admissionService.getAdmissions().subscribe(perioddata =>
  3.       {
  4.     this.admission = [perioddata]
  5.     
  6.    )};

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

  1.  onValueChanged(data) {
  2.     this.admission.filter(['country', '=', data.value]);
  3. }
  5. <dx-select-box
  6.             id="selectbox"
  7.             displayExpr="name"
  8.             (onValueChanged)="onValueChanged($event)"
  9.         ></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.

答案1

得分: 2

如果您的onValueChanged方法的data是某个国家，那么您可以过滤您的period数组：

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

一个示例：

  1. const period = [
  2.     {
  3.         name: "Germany",
  4.         id: 1,
  5.         data: [
  6.             { date0: "2015-01-28", date1: "2015-02-04" },
  7.             { date0: "2015-08-27", date1: "2015-09-07" },
  8.             { date0: "2015-12-24", date1: "2016-01-05" }
  9.         ]
  10.     },
  11.     {
  12.         name: "France",
  13.         id: 2,
  14.         data: [
  15.             { date0: "2015-01-28", date1: "2015-02-04" },
  16.             { date0: "2015-08-27", date1: "2015-09-07" },
  17.             { date0: "2015-12-24", date1: "2016-01-05" }
  18.         ]
  19.     }
  20. ];
  22. event = 'France';
  23. const result = period.filter(f => f.name == event);
  24. console.log(result);
英文:

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

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

An example:

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

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

  1. const period = [
  2.     {
  3.         name: &quot;Germany&quot;,
  4.         id: 1,
  5.         data: [
  6.             { date0: &quot;2015-01-28&quot;, date1: &quot;2015-02-04&quot; },
  7.             { date0: &quot;2015-08-27&quot;, date1: &quot;2015-09-07&quot; },
  8.             { date0: &quot;2015-12-24&quot;, date1: &quot;2016-01-05&quot; }
  9.         ]
  10.     },
  11.     {
  12.         name: &quot;France&quot;,
  13.         id: 2,
  14.         data: [
  15.             { date0: &quot;2015-01-28&quot;, date1: &quot;2015-02-04&quot; },
  16.             { date0: &quot;2015-08-27&quot;, date1: &quot;2015-09-07&quot; },
  17.             { date0: &quot;2015-12-24&quot;, date1: &quot;2016-01-05&quot; }
  18.         ]
  19.     }
  20. ];
  22. event = &#39;France&#39;;
  23. const result = period.filter(f =&gt; f.name == event);
  24. console.log(result);

<!-- end snippet -->

答案2

得分: 0

  1. onValueChanged(event) {
  2.    const country = event.target.value;
  3.    this.admissionService.getAdmissions().pipe(
  4.     // 获取相关对象（假设是德国部分）
  5.      map(countriesData => countriesData.find(countryData => countryData.name === 
  6.           country)),
  7.     // 从相关对象中获取数据数组
  8.     map(countryData => countryData.data),
  9.    ).subscribe(dataForCountry => {
  10.      // 在此处进行必要的操作，我现在只是记录它。
  11.      console.log(dataForCountry);
  12.   });
  13. }

如果您使用较旧版本的 RxJs，则应为：

  1. this.admissionService.getAdmissions()
  2.     .map(countriesData => countriesData.find(countryData => countryData.name === country))
  3.     .map(countryData => countryData.data)
  4.     .subscribe(dataArrayForCountry => {
  5.       console.log(dataArrayForCountry);
  6.   });
英文:

Can you do:

  1. onValueChanged(event) {
  2.    const country = event.target.value;
  3.    this.admissionService.getAdmissions().pipe(
  4.     // get the object in concern (let&#39;s say the Germany slice)
  5.      map(countriesData =&gt; countriesData.find(countryData =&gt; countryData.name === 
  6.           country)),
  7.     // get the data array from the object in concern
  8.     map(countryData =&gt; countryData.data),
  9.    ).subscribe(dataArrayForCountry =&gt; {
  10.      // do whatever you need, at this point I am just logging it.
  11.      console.log(dataForCountry);
  12.   });
  13. }

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

  1. this.admissionService.getAdmissions()
  2.     .map(countriesData =&gt; countriesData.find(countryData =&gt; countryData.name === country))
  3.     .map(countryData =&gt; countryData.data)
  4.     .subscribe(dataArrayForCountry =&gt; {
  5.       console.log(dataArrayForCountry);
  6.   });

huangapple
  • 本文由 发表于 2020年1月3日 19:53:01
  • 转载请务必保留本文链接：https://go.coder-hub.com/59578160.html
  • angular
  • javascript
  • json
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定