前回からの続きです。
https://teratail.com/questions/142016
引き続き下記のJSONを取得し、作業を行っています。
https://worldcup.sfg.io/matches
やりたいこと
次のステップとして、
- home_team_eventsとaway_team_eventsを取得し、2つのteam_eventを結合する
- timeを基準にソートし、各チームeventをオブジェクト?に入れる
- 連結したオブジェクトを見てタグの出し分けをしたい
ということがしたいです。
やりたいことのイメージ↓
日本 | vs | アルゼンチン |
---|---|---|
goal 香川 | 6 | |
16 | goal メッシ | |
goal 岡崎 | 26 | |
50 | 交代 アグエロ |
試したこと
やりたいこと1は、まず配列を連結する必要がると考えcomponentWillMount()
内でObject.assign()
を行いましたが、エラーになってしまいました。
現在のコード
JSX
1import React, { Component, Fragment } from 'react'; 2import styled from 'styled-components'; 3import axios from 'axios'; 4import User from './App.css' 5 6const MatchItem = styled.div` 7 max-width: 600px; 8 margin: 0 auto 16px; 9 border: 1px solid #ccc; 10`; 11const TeamWrap = styled.div` 12 display: flex; 13`; 14const Team = styled.div` 15 width: 100%; 16 text-align: center; 17 height: 60px; 18 font-weight: bold; 19 display: flex; 20 justify-content: center; 21 align-items: center; 22`; 23const MatchTexts = styled.div` 24 min-width: 50px; 25 flex-shrink: 0; 26 display: flex; 27 font-size: 12px; 28 justify-content: center; 29 align-items: center; 30 border-left: 1px solid #ccc; 31 border-right: 1px solid #ccc; 32`; 33const MatchHeading = styled.div` 34 text-align: center; 35 background: #333; 36 color: #fff; 37 font-weight: bold; 38`; 39 40 41const StatsWrap = styled.div``; 42const GoalWrap = styled.div` 43 display: flex; 44`; 45const Goal = styled.div` 46 width: 100%; 47 text-align: center; 48 height: 30px; 49 font-weight: bold; 50 display: flex; 51 justify-content: center; 52 align-items: center; 53`; 54const EventWrap = styled.div``; 55const EventDetail = styled.div` 56 display: flex; 57 &:not(:last-child) { 58 border-bottom: 1px solid #eee; 59 } 60`; 61const Event = styled.div` 62 width: 100%; 63 text-align: center; 64 height: 30px; 65 display: flex; 66 align-items: center; 67 font-size: 14px; 68`; 69const EventType = styled.div` 70 width: 80px; 71 height: 30px; 72 font-size: 10px; 73 flex-shrink: 0; 74 display: flex; 75 align-items: center; 76 justify-content: center; 77 background: #333; 78 ${({ isGoal }) => isGoal && ` 79 color: #fff; 80 font-weight: bold; 81 } 82 `} 83 ${({ isIn }) => isIn && ` 84 color: #a0d8ff; 85 `} 86 ${({ isOut }) => isOut && ` 87 color: #ffcdcd; 88 `} 89 ${({ isCardY }) => isCardY && ` 90 color: #fffacd; 91 `} 92 ${({ isCardR }) => isCardR && ` 93 color: #ff6363; 94 `} 95`; 96const EventPlayer = styled.div` 97 width: 100%; 98 text-align: center; 99`; 100 101class App extends Component { 102 constructor(){ 103 super(); 104 this.state = { 105 matchDatas:[] 106 }; 107 } 108 componentWillMount(){ 109 const request = axios.create({ 110 baseURL: 'https://worldcup.sfg.io/' 111 }) 112 request.get('/matches') 113 .then(res => { 114 this.setState({ 115 matchDatas: res.data 116 }); 117 }) 118 } 119 render() { 120 return ( 121 <Fragment> 122 {this.state.matchDatas.map((item, index) => ( 123 <MatchItem key={index}> 124 <TeamWrap> 125 <Team>{item.home_team_country}</Team> 126 <MatchTexts>vs</MatchTexts> 127 <Team>{item.away_team_country}</Team> 128 </TeamWrap> 129 <StatsWrap> 130 <MatchHeading>Stats</MatchHeading> 131 <GoalWrap> 132 <Goal>{item.home_team.goals}</Goal> 133 <MatchTexts>Goal</MatchTexts> 134 <Goal>{item.away_team.goals}</Goal> 135 </GoalWrap> 136 </StatsWrap> 137 <EventWrap> 138 <MatchHeading>Events</MatchHeading> 139 {item.home_team_events.map((matchHomeEvent,i) => ( 140 <EventDetail key={i}> 141 <Event> 142 {(() => { 143 if (matchHomeEvent.type_of_event === 'goal') { 144 return ( 145 <EventType isGoal>Goal!!!</EventType> 146 ) 147 } else if (matchHomeEvent.type_of_event === 'goal-penalty') { 148 return ( 149 <EventType isGoal>Goal(PK)</EventType> 150 ) 151 } else if (matchHomeEvent.type_of_event === 'goal-own') { 152 return ( 153 <EventType isGoal>Goal(OWN)</EventType> 154 ) 155 } else if (matchHomeEvent.type_of_event === 'substitution-in') { 156 return ( 157 <EventType isIn>In</EventType> 158 ) 159 } else if (matchHomeEvent.type_of_event === 'substitution-out') { 160 return ( 161 <EventType isOut>Out</EventType> 162 ) 163 } else if (matchHomeEvent.type_of_event === 'yellow-card') { 164 return ( 165 <EventType isCardY>Yellow Card</EventType> 166 ) 167 } else if (matchHomeEvent.type_of_event === 'yellow-card-second') { 168 return ( 169 <EventType isCardR>Yellow Card(2)</EventType> 170 ) 171 } else if (matchHomeEvent.type_of_event === 'red-card') { 172 return ( 173 <EventType isCardR>Red Card</EventType> 174 ) 175 } 176 })()} 177 <EventPlayer>{matchHomeEvent.player}</EventPlayer> 178 </Event> 179 <MatchTexts>{matchHomeEvent.time}</MatchTexts> 180 <Event>aa</Event> 181 </EventDetail> 182 ))} 183 </EventWrap> 184 </MatchItem> 185 ))} 186 </Fragment> 187 ); 188 } 189} 190 191export default App;
まずはやりたいこと1を実現したく、よろしくお願いします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/27 14:43 編集