Data Abstraction JS

• In the following code segment we will:
• declare a function
• input and store data
• display it

function Player(name, position, average) { // make a function 
    this.name = name; // different categories
    this.position = position;
    this.average = average;
    this.role = "";
}

Player.prototype.setRole = function(role) { // whatever input we put into roles, it will be stored.
    this.role = role;
}

Player.prototype.toJSON = function() {
    const obj = {name: this.name, position: this.position, average: this.average, role: this.role};
    const json = JSON.stringify(obj);
    return json;
}

var manager = new Player("Bob Melvin", "Catcher", ".233"); // new player, including all the categories
LogItType(manager);
LogItType(manager.toJSON());

manager.setRole("Manager");
LogItType(manager);
LogItType(manager.toJSON());

object ; Player {
  name: 'Bob Melvin',
  position: 'Catcher',
  average: '.233',
  role: '' }
string ; {"name":"Bob Melvin","position":"Catcher","average":".233","role":""}
object ; Player {
  name: 'Bob Melvin',
  position: 'Catcher',
  average: '.233',
  role: 'Manager' }
string ; {"name":"Bob Melvin","position":"Catcher","average":".233","role":"Manager"}

• In this segment we are going to make a list of players with their names, position, and average
• recall those three data categories from the previous management
• we are then going to make a function which stores it in JSON
• then we display

var players = [ // make a list, storing all the categories we had in the previous code segment. 
    new Player("Manny Machado", "Third Base", ".299"),
    new Player("Trent Grisham", "Center Field", ".185"),
    new Player("Jake Cronenworth", "Second Base", ".238"),
    new Player("Jurickson Profar", "Left Field", ".240"),
    new Player("Ha-Seong Kim", "Shortstop", ".252"),
    new Player("Brandon Drury", "First Base", ".226"),
    new Player("Jorge Alfaro", "Catcher", ".249"),
    new Player("Wil Myers", "Right Field, First Base", ".255"),
    new Player("Juan Soto", "Right Field", ".242"),
    new Player("Austin Nola", "Catcher", ".248"),
    new Player("Josh Bell", "Designated Hitter, First Base", ".191"),
    new Player("Jose Azocar", "Outfield", ".272"), 
];

function Padres(manager, players){ // new function in order to store the data

    manager.setRole("Manager");
    this.manager = manager;
    this.padres = [manager];
    
    this.players = players;
    this.players.forEach(player => { player.setRole("Player"); this.padres.push(player); });

    this.json = [];
    this.padres.forEach(player => this.json.push(player.toJSON()));
}

sd2022 = new Padres(manager, players); // this is how we will display it. 

LogItType(sd2022.padres);
LogItType(sd2022.padres[0].name);
LogItType(sd2022.json[0]);
LogItType(JSON.parse(sd2022.json[0]));

object ; [ Player {
    name: 'Bob Melvin',
    position: 'Catcher',
    average: '.233',
    role: 'Manager' },
  Player {
    name: 'Manny Machado',
    position: 'Third Base',
    average: '.299',
    role: 'Player' },
  Player {
    name: 'Trent Grisham',
    position: 'Center Field',
    average: '.185',
    role: 'Player' },
  Player {
    name: 'Jake Cronenworth',
    position: 'Second Base',
    average: '.238',
    role: 'Player' },
  Player {
    name: 'Jurickson Profar',
    position: 'Left Field',
    average: '.240',
    role: 'Player' },
  Player {
    name: 'Ha-Seong Kim',
    position: 'Shortstop',
    average: '.252',
    role: 'Player' },
  Player {
    name: 'Brandon Drury',
    position: 'First Base',
    average: '.226',
    role: 'Player' },
  Player {
    name: 'Jorge Alfaro',
    position: 'Catcher',
    average: '.249',
    role: 'Player' },
  Player {
    name: 'Wil Myers',
    position: 'Right Field, First Base',
    average: '.255',
    role: 'Player' },
  Player {
    name: 'Juan Soto',
    position: 'Right Field',
    average: '.242',
    role: 'Player' },
  Player {
    name: 'Austin Nola',
    position: 'Catcher',
    average: '.248',
    role: 'Player' },
  Player {
    name: 'Josh Bell',
    position: 'Designated Hitter, First Base',
    average: '.191',
    role: 'Player' },
  Player {
    name: 'Jose Azocar',
    position: 'Outfield',
    average: '.272',
    role: 'Player' } ]
string ; Bob Melvin
string ; {"name":"Bob Melvin","position":"Catcher","average":".233","role":"Manager"}
object ; { name: 'Bob Melvin',
  position: 'Catcher',
  average: '.233',
  role: 'Manager' }

• in this segment we are going to display the data which we created / stored in the previous segment
• html table format.

Padres.prototype._toHtml = function() { // display data in a table
    var style = (
        "display:inline-block;" +
        "border: 2px solid grey;" +
        "box-shadow: 0.8em 0.4em 0.4em grey;"
    );
    // set up the table

    var body = "";
    body += "<tr>";
    body += "<th><mark>" + "Name" + "</mark></th>";
    body += "<th><mark>" + "Position" + "</mark></th>";
    body += "<th><mark>" + "Batting Average" + "</mark></th>";
    body += "<th><mark>" + "Role" + "</mark></th>";
    body += "</tr>";
    
      // include the data in the table according to categories. 

    for (var row of sd2022.padres) {
        
        body += "<tr>";
        
        body += "<td>" + row.name + "</td>";
        body += "<td>" + row.position + "</td>";
        body += "<td>" + row.average + "</td>";
        body += "<td>" + row.role + "</td>";
        
        body += "<tr>";
      }
    
       // html format
      return (
        "<div style='" + style + "'>" +
          "<table>" +
            body +
          "</table>" +
        "</div>"
      );
    
    };
    
    
    $$.html(sd2022._toHtml());

</table></div> </div> </div> </div> </div> </div> </div>

Name	Position	Batting Average	Role
Bob Melvin	Catcher	.233	Manager
Manny Machado	Third Base	.299	Player
Trent Grisham	Center Field	.185	Player
Jake Cronenworth	Second Base	.238	Player
Jurickson Profar	Left Field	.240	Player
Ha-Seong Kim	Shortstop	.252	Player
Brandon Drury	First Base	.226	Player
Jorge Alfaro	Catcher	.249	Player
Wil Myers	Right Field, First Base	.255	Player
Juan Soto	Right Field	.242	Player
Austin Nola	Catcher	.248	Player
Josh Bell	Designated Hitter, First Base	.191	Player
Jose Azocar	Outfield	.272	Player