JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<div class="field">
<button class="run">Submit</button>
</div>

<label>Input</label>
<textarea id="data">{"tournament":{"teams":{"team":[{"id":"8","school":"Alabama","nick":"Crimson Tide","color":"#990000","seed":"9","link":"alabama","hashtag":"","abbrev":"ALA"},{"id":"77","school":"BYU","nick":"Cougars","color":"#273b5c","seed":"14","link":"byu","hashtag":"","abbrev":"BYU"},{"id":"51","school":"Baylor","nick":"Bears","color":"#003e2d","seed":"3","link":"baylor","hashtag":"","abbrev":"BAYLOR"},{"id":"14927","school":"Belmont","nick":"Bruins","color":"#d4103d","seed":"14","link":"belmont","hashtag":"","abbrev":"BELMNT"},{"id":"107","school":"California","nick":"Golden Bears","color":"#e9bb19","seed":"12","link":"california","hashtag":"","abbrev":"CAL"},{"id":"140","school":"Cincinnati","nick":"Bearcats","color":"#000000","seed":"6","link":"cincinnati","hashtag":"","abbrev":"CINCY"},{"id":"157","school":"Colorado","nick":"Buffaloes","color":"#CC9900","seed":"11","link":"colorado","hashtag":"","abbrev":"COLO"},{"id":"156","school":"Colorado St.","nick":"Rams","color":"#af9960","seed":"11","link":"colorado-st","hashtag":"","abbrev":"CO ST"},{"id":"164","school":"Connecticut","nick":"Huskies, UConn","color":"#333366","seed":"9","link":"connecticut","hashtag":"","abbrev":"UCONN"},{"id":"169","school":"Creighton","nick":"Bluejays","color":"#153790","seed":"8","link":"creighton","hashtag":"","abbrev":"CREIGH"},{"id":"173","school":"Davidson","nick":"Wildcats","color":"#000000","seed":"13","link":"davidson","hashtag":"","abbrev":"DVDSON"},{"id":"184","school":"Detroit","nick":"Titans","color":"#003a8a","seed":"15","link":"detroit","hashtag":"","abbrev":"DETROI"},{"id":"193","school":"Duke","nick":"Blue Devils","color":"#00529c","seed":"2","link":"duke","hashtag":"","abbrev":"DUKE"},{"id":"235","school":"Florida","nick":"Gators","color":"#003399","seed":"7","link":"florida","hashtag":"","abbrev":"FLA"},{"id":"234","school":"Florida St.","nick":"SYMBOL:...

CSS

body {
    padding: 20px; font-family: helvetica;
}
label {
    display: block;
}
textarea {
    margin-bottom: 20px;
    width: 350px;
    height: 180px;
    padding: 10px;
    display: block;
    
}

.field {position: relative; padding: 5px 0px 5px 200px}
.field label {width: 200px; position: absolute; top: 5px; left: 5px;}
.field select {}

JavaScript

var data = JSON.parse($('data').get('text'));
var ogTeams = data.tournament.teams.team;
var tournament = {
   regions:['South','West','East','Midwest']
  ,teams : {
   
  }
};
var teamsByAbbr = {};  
tournament.teams.array = ogTeams.map(function (ogTeam) {
    var team = teamsByAbbr[ogTeam.abbrev] = { 
        "abbr" : ogTeam.abbrev,
        "hashTag" : ogTeam.hashtag,
        "link" : ogTeam.link,
        "nickname" : ogTeam.nick,
        "school" : ogTeam.school,
        "seed": +ogTeam.seed,
        "region": null
      };
      return team;
});

tournament.teams.array.push({ 
    "abbr" : "TBD",
    "hashTag" : "#TBD",
    "link" : "tbd",
    "nickname" : "TBD",
    "school" : "tbd",
    "image": "http://embednr.involver.com/cache/imgs/99135543.png",
    "seed": 100,
    "region": 4
});

tournament.teams.array.forEach(function (team) {
var changer = new Element('div.field');
var label = new Element('label',{
    text: team.school + " - " + team.abbr
});

changer.adopt(label);

var regionOptions = new Element('select', {
    html: tournament.regions.map(function (region) {
       return '<option>'+region+'</option>';        
    }).join(''),
    events: {
        change: function (e) {
            team.region = tournament.regions.indexOf(regionOptions.get('value'));
            process();
        }
    }
});
    
changer.adopt(regionOptions);
changer.inject($('set-regions'));
});

function process () {
$('output').set('text',JSON.stringify({tournament:tournament}));
}
    
$$('.run').addEvent('click',process);