循环遍历对象，将值拆分为自己的对象以传递到车把

Question

I am making an app where I make use of an API which returns data such as the recent_form of a team (football/soccer) - recent form returns something like WLDWW (meaning win/draw/loss) and I want to split that and make it into it's own object for when I output it into my handlebars (this way I can do background colours and eventually expand on functionality)

I currently have a for loop which goes through all the different teams in the table and splits the recent form into an object, however I get the issue that when I pass that object into my res.render it only sends over the last one and not all 20 of them.

I'll show how my current app is set up (although not working):

 router.get('/table', (req, res, next) => { var url = `http://api.football-api.com/2.0/standings/1204${config.auth}` axios.get(url).then(response => { const posSort = response.data.sort((a, b) => { return a.position - b.position; }); for(var i = 0, l = posSort.length; i < l; i++) { var recentForm = posSort[i].recent_form.split(''); }; console.log(recentForm); res.render('table', { teamStats: posSort, recentForm: recentForm }); }).catch(error => { console.log(error); }) }); 

 <table> <tr> <th>Position</th> <th>Club</th> <th>Played</th> <th>Won</th> <th>Drawn</th> <th>Lost</th> <th>GF</th> <th>GA</th> <th>GD</th> <th>Points</th> <th>Form</th> </tr> {{#each teamStats}} <tr> <td>{{position}}</td> <td>{{team_name}}</td> <td>{{overall_gp}}</td> <td>{{overall_w}}</td> <td>{{overall_d}}</td> <td>{{overall_l}}</td> <td>{{overall_gs}}</td> <td>{{overall_ga}}</td> <td>{{gd}}</td> <td>{{points}}</td> {{/each}} {{#each recentForm}} <td></td> {{/each}} </tr> </table> 

Just to run down what is happening above in a tldr; I get the data from the API, I sort it based on the position field (posSort variable), then I split the recent_form value so that it is an object, this is what I attempt to pass to my res.render - handlebars is intended to loop through recentForm

Answer 1

The reason why you only see the last item in the 'recentForm' variable is because the value of 'recentForm' gets overwritten in every iteration of the for-loop.

What you want to do is concatenate or push the value of 'posSort[i].recent_form.split('')' in every iteration, instead of assigning new values to the variable.

var recentForm = [];

for(var i = 0, l = posSort.length; i < l; i++) {
  recentForm = recentForm.concat(posSort[i].recent_form.split(''));
};

You can alternatively map the 'posSort' to a new array using ES6 map method.

var recentForm = posSort.map(pos => pos.recent_form.split(''));