A newbie to Dart with no experience in JS. i have written code to populate a dropdown from JSON.
Dart Code:
import 'dart:html';
import 'dart:convert' show JSON;
import 'dart:async' show Future;
ButtonElement genButton;
SelectElement selectTeam;
FormElement teamPlayer;
InputElement teamPlayers;
List<String>teams=[];
List<String>players=[];
main() async{
selectTeam = querySelector('#teamNames');
teamPlayer = querySelector('#teamPlayers');
selectTeam.onChange.listen(populateTeams);
try {
await prepareTeams1 ();
selectTeam.disabled = false; //enable
} catch(arrr) {
print('Error initializing team names: $arrr');
}
}
//initial dropdown populate
Future prepareTeams1()async{
String path = 'teams.json';
String jsonString = await HttpRequest.getString(path);
parseTeamNamesFromJSON(jsonString);
}
parseTeamNamesFromJSON(String jsonString){
Map team = JSON.decode(jsonString);
teams = team['Teams'];
print(teams);
for (int i =0; i< teams.length; i++){
var option = new OptionElement();
option.value = teams[i];
option.label =teams[i];
option.selected = false;
selectTeam.append(option);
}
}
//populating form
Future prepareTeams2(String Team)async{
String path = 'teams.json';
String jsonString = await HttpRequest.getString(path);
parsePlayerNamesFromJSON(jsonString, Team);
}
parsePlayerNamesFromJSON(String jsonString,String Team){
Map team = JSON.decode(jsonString);
teams = team[Team];
print(teams);
for (int i =0; i< teams.length; i++){
var input = new InputElement();
input.type = "checkbox";
input.id = "player";
teamPlayer.append(input);
teamPlayer.appendText(teams[i]);
teamPlayer.appendHtml("<br>");
}
}
void populateTeams(Event e){
print('selectTeam.length: ${selectTeam.length}');
print(selectTeam.value);
prepareTeams2(selectTeam.value);
if (selectTeam.length == 0){
}
}
HTML:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pirate badge</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="player.css">
</head>
<body>
<h1>Team Names</h1>
<select id="teamNames" >
</select>
<h1>Team players</h1>
<form id="teamPlayers">
<input type="submit" value="Submit">
</form>
<script type="application/dart" src="player.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
and based on that selection display a form with checkboxes. The issue i am facing is how to detect them which checkboxes have been checked and if so how the value of that checkbox can be captured.
possible duplicate How to know if a checkbox or radio button is checked in Dart?
However them checkboxes not dynamically created.
if the above approach is wrong, kindly advise
Aucun commentaire:
Enregistrer un commentaire