根据所选选项动态使用不同的数据对象

Posted

技术标签:

【中文标题】根据所选选项动态使用不同的数据对象【英文标题】:Dynamically consume a different data object depending on the option selected 【发布时间】:2020-02-18 11:54:07 【问题描述】:

我有一个包含 2 个数组的数据对象(团队名称列表)

const data = 
  Liga: ['Alaves','Atletico', 'Barcelona', 'Betis'],
  Premier: ["Arsenal", "Chelsea", "Everton", 'Liverpool']
;

根据我选择的值(Liga 或 Premier),我会得到我的球队名单。

这些团队有两个不同的数据得分结果scoresligascorespremier

const scoresliga = [
   day: '0', Alaves: -6, Atletico: -1, Barcelona: -2, Betis: -6,
   day: '1', Alaves: -7, Atletico: 1, Barcelona: -2, Betis: -6
];

const scorespremier = [
   day: '0', Arsenal: -6, Chelsea: -1, Everton: -2, Liverpool: -6,
   day: '1', Arsenal: -7, Chelsea: 1, Everton: -2, Betis: -6
];

我的问题是我必须找到一种方法,当我选择“Liga”时,我必须使用 scoresliga 对象,如果我选择“Premier”,我必须使用 scorespremier

这也将解决我在计算目前它不是一般功能的团队的平均值时遇到的问题。

这是使用 scoresliga 数据对象的函数的 sn-p,但它需要是 Ligas(Premier 和 Liga)的共享函数。

const getAverage = team => 

  if (isNaN(scoresliga[0][team])) return null;

  return scoresliga.map(x => x[team]).reduce((a, c) => a + c) / scoresliga.length;
;

我已经复制了我的案例,看看here

【问题讨论】:

【参考方案1】:

只需向 getAverage 添加其他属性

const getAverage = (league, team) => 

  if (isNaN(league[0][team])) return null;

  return league.map(x => x[team]).reduce((a, c) => a + c) / 
     league.length;
;

还要在分数中创建一些映射

const scores = 
  Liga: [
     day: "0", Alaves: -6, Atletico: -1, Barcelona: -2, Betis: -6 ,
     day: "1", Alaves: -7, Atletico: 1, Barcelona: -2, Betis: -6 
  ],
  Premier: [
     day: "0", Arsenal: -6, Chelsea: -1, Everton: -2, Liverpool: -6 ,
     day: "1", Arsenal: -7, Chelsea: 1, Everton: -2, Betis: -6 
  ]
;

在 Chart.js 中

<span>getAverage(scores[this.state.selectedLeague], this.state.selectedTeam)</span>

另外,更新

handleLeagueChange = event => 
    const selectedLeague = event.target.value;
    this.setState( selectedLeague: selectedLeague , () => 
      this.setState( selectedTeam: data[selectedLeague][0] );
    );
  ;

【讨论】:

您介意编辑我的代码框以接受答案吗? 这里不计算平均值codesandbox.io/s/recharts-examples-s5jj2 @Koala7 我添加了指向 CodeSandbox 的链接,它计算平均值。【参考方案2】:

我建议你在数组中添加一个键 championShip

const scoresliga = [
   day: '0', championShip: 'Liga', Alaves: -6, Atletico: -1, Barcelona: -2, Betis: -6,
   day: '1', championShip: 'Liga', Alaves: -7, Atletico: 1, Barcelona: -2, Betis: -6, championShip: 'Liga'
];

const scorespremier = [
   day: '0', championShip: 'Premier',  Arsenal: -6, Chelsea: -1, Everton: -2, Liverpool: -6,
   day: '1', championShip: 'Premier', Arsenal: -7, Chelsea: 1, Everton: -2, Betis: -6,
   day: '1', championShip: 'Premier', Chelsea: 1, Everton: -2, Betis: -6
];

那么你的数组会更容易操作,你可以拥有一个数组:

let merged = scoresliga.concat(scorespremier);

let desiredTeam = 'Arsenal';
const filteredByTeam = merged.filter(f=> f.championShip === 'Premier' && f[desiredTeam]);
const averageByTeamQuantity = filteredByTeam.reduce((a,c) =>
  a += +c[desiredTeam];
  return a;
, 0)/ filteredByTeam.length;


console.log(averageByTeamQuantity);

【讨论】:

以上是关于根据所选选项动态使用不同的数据对象的主要内容,如果未能解决你的问题,请参考以下文章

所选材质 UI 选项卡的颜色与其他选项卡不同

jQuery Datepicker - 根据所选选项刷新可选择的日期

如何根据所选选项的高度调整选择菜单的大小?

根据所选选项显示输入字段

应用过滤器时动态更新所选选项?

如何动态调整 select2 输入的大小,使其与所选选项的宽度相同?