선택한 옵션에 따라 다른 데이터 개체를 동적으로 사용

debugcn 에 게시 Dev

코알라 7

2 개의 배열 (팀 이름 목록)을 포함하는 데이터 개체가 있습니다.

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

내가 선택한 값 (Liga 또는 Premier)에 따라 팀 목록을 얻습니다.

이 팀에는 두 가지 데이터 점수 결과가 scoresliga있으며scorespremier

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데이터 객체를 사용하는 함수의 스 니펫 이지만 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;
};

나는 내 사건을 재현 한 모습이 여기에

Giedrius Vičkus

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] });
    });
  };

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

선택한 옵션에 따라 다른 데이터 개체를 동적으로 사용

선택한 옵션에 따라 다른 데이터 개체를 동적으로 사용

R Shiny의 다른 선택에 따라 두 개의 selectInput 상자를 동적으로 업데이트

한 데이터 프레임에서 다른 데이터 프레임으로 데이터를 복사하고 값에 따라 데이터를 대체합니다.

동적으로 선택을 만들고 asp.net 코어의 jQuery를 사용하여 데이터베이스에서 선택 옵션을 추가합니다.

선택한 언어에 따라 다른 데이터 전용 CakePHP 3.3 테이블

사용자 선택에 따라 콤보 박스를 동적으로 업데이트

사용자 선택에 따라 콤보 박스를 동적으로 업데이트

선택한 다른 옵션에 따라 선택 옵션 변경

3 개 이상의 항목이있는 Flutter BottomNavigationBar는 선택한 항목에 따라 자동으로 패딩을 적용합니다.

3 개 이상의 항목이있는 Flutter BottomNavigationBar는 선택한 항목에 따라 자동으로 패딩을 적용합니다.

데이터베이스에서 선택한 다른 옵션을 기반으로 선택 옵션 업데이트

jQuery를 사용하여 데이터베이스에서 동적 선택 옵션으로 선택 옵션 채우기

AngularJS는 선택한 선택 옵션에 따라 텍스트 입력으로 객체 배열을 필터링합니다.

Pandas 데이터 프레임은 데이터 프레임 내에서 조건에 따라 선택한 행에만 람다를 적용합니다.

다른 DropDownList의 선택에 따라 DropdownList를 동적으로 채 웁니다.

선택된 DataList에 옵션에 따라 체크 박스를 선택하는 방법 (다른 페이지)

선택한 선택 옵션에 따라 다른 선택 표시

동적으로 열 이름 선택 (다른 테이블 행의 값에 따라)

하나의 Firestore 컬렉션에서 다른 컬렉션으로 데이터를 선택적으로 복사

다중 데이터베이스 MVC 응용 프로그램에서 선택한 데이터베이스에 따라 특정 DBContext 선택

Ajax를 사용하여 선택에 따라 데이터 변경

선택에 따라 선택 옵션 가져 오기를 사용하여 DIV의 동적 추가

Symfony 5의 다른 필드에있는 사용자 선택 값에 따라 동적으로 필드 채우기

angulajs를 사용하여 동일한 데이터를 다른 옵션에 어떻게 바인딩합니까?

데이터가 채워진 선택 메뉴에서 옵션을 선택하여 데이터베이스에서 다음 선택 메뉴로 이동합니다. 데이터를 찾을 수 없을 때 "사용 가능한 데이터 없음"을 표시하는 방법

nodejs 여권-API에서 동일한 경로를 사용하지만 권한에 따라 다른 데이터 세트를 반환합니다.

사용자 선택에 따라 MYSQL 테이블의 데이터를 HTML 형식으로 출력

Excel은 조건에 따라 한 시트에서 다른 시트로 데이터를 복사합니다.

적절한 클라이언트 인증서를 자동으로 또는 사용자 선택에 요청

AngularJS를 사용하는 크롬 브라우저에서 ng-click을 통한 옵션 선택이 작동하지 않습니다.