JSON and JavaScript Objects

All About Game Character Objects and JSON

What is a Game Character Object?

JSON is a notation for a data structure that stores key-value pairs in a single variable. In game development, it could act as a character sheet that holds a player’s stats, equipped items, and inventory in a single organized unit.

Key Features:

  • Elements are stored as a hash table (like a character attribute registry)
  • Each attribute can be accessed by its key (e.g., character.health)
  • You can change stats, add new gear, or remove inventory items
  • Usually stores elements as a mix of different data types (strings, numbers, arrays)
  • Data can be nested (e.g., storing an inventory array inside a character object)

Why are Objects Important in Game Development?

JavaScript Objects allow you to:

  • Store related character stats and properties under one character sheet
  • Update player health, level, and equipment dynamically during gameplay
  • Organize game state information in a structured, readable way
  • Save and load player save-data between sessions (JSON format)

Character Profile Object

Let’s start with a basic character screen. Notice how we use keys (like “name”, “level”, “class”) to access character data.

%%js

const student = {
    name: "Steve",
    level: 10,
    class: "Warrior",
};

Notice a few things:

  • The keys do not need quotes
  • The object includes a function
  • JavaScript understands this immediately

This only works because JavaScript is running the code.

Code Runner 1

Here’s what to do:

Run the code below, then try changing it.

%js

// CODE_RUNNER: Personalize your character profile screen.

// Simple game character object with key-value pairs
const character = {
    name: "Steve",
    level: 10,
    class: "Warrior",
};

// Access character stats using keys
console.log("Name:", character.name);
console.log("Level:", character.level);
console.log("Class:", character.class);

<IPython.core.display.Javascript object>

Try the following:

  • Change the character’s name to your own
  • Log the entire object

Now try this:

console.log(character.element);

This will print undefined. This isn’t because of an error, but instead because character.element was never defined. JavaScript objects are flexible. They do not break just because a property is undefined.

Section 2: What is JSON?

JSON stands for JavaScript Object Notation.

Even though it has the word JavaScript in the name, JSON is not JavaScript code.

JSON is:

  • A text format
  • Used to send and store data

Because JSON is meant to be shared, it has strict rules.

JSON Rules

JSON:

  • Required double quotes for all keys
  • Does NOT allow functions
  • Does NOT allow comments
  • Does NOT allow trailing commas

If any rule is broken, then JSON will fail.

Code Runner 2

Code Runner Challenge

Personalize your character sheet again and parse it from JSON

View IPYNB Source 
%%js

// CODE_RUNNER: Personalize your character sheet again and parse it from JSON

const jsonData = `
{
    "name": "Steve",
    "level": 10,
    "class": "Warrior"
    "online": true
}
`;


const parsedData = JSON.parse(jsonData);
console.log(parsedData);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Now, intentionally break it. Try these examples:

  • Remove quotes from a key
  • Add a trailing comma
  • Change true to True
  • Add a comment

When JSON breaks, JavaScript returns an error. This is because JSON must be readable so computers can read it reliably.

Section 3: Converting Between JSON and JavaScript Objects

Code Runner Challenge

Converting a JavaScript object to JSON and back (with your own data)

View IPYNB Source 
%%js

// CODE_RUNNER: Converting a JavaScript object to JSON and back (with your own data)

const user = {
    username: "PLAYER_1",
    password: 12345,
    isOnline: false
};


const jsonString = JSON.stringify(user);
console.log(jsonString);


const parsedUser = JSON.parse(jsonString);
console.log(parsedUser);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Try the following:

  • Add a new property
  • Add an array
  • Add a nested object

JSON Objects Summary

  • Elements are stored in a hash table (key-value)
  • You can edit the hash table
  • Store different data types
  • You can nest objects
  • Purpose: store related data, store/organize more complex data, transfer data in JSON format

    Homework Assignment: JSON Challenge

    Create a resume containing your personal information, skills, and education and print it as a JSON string.

Code Runner Challenge

Create a character sheet as a JavaScript Object and print to the console as JSON

View IPYNB Source 
%%js

// CODE_RUNNER: Create a character sheet as a JavaScript Object and print to the console as JSON

// 1. Create a JavaScript object named `character_sheet` with the following properties:
const character_sheet = {
    name: "", // Add your name
    username: "",    // Add your username
    character_info: {     // Nested object
        level: "",
        class: "",
        health: ""
    },
    skills: []     // Array of strings
};
// 2. Access and display properties for name, username, and character info using dot notation. Look at section 1.
// 3. Convert the `character_sheet` JavaScript object into a JSON string and store it in a variable named `jsonString`, then log the JSON string to the console. Look at Section 3.
// 4. Parse the JSON string back into a JavaScript object and store it in a variable named `parsedCharacterSheet`, then log the object to the console. Look at Section 3.
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Hint: use above code runners as examples, then edit them

Submit Assignment

Your code will be saved as a Gist and reviewed automatically. You must be logged in to submit.

Need to update a submission later? Open the submissions dashboard.