Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.






                ///////////////////////////////// Intro to JSON /////////////////////////////// 
  The next JavaScript topic is JSON :
  JSON stands for JavaScript Object Notation.
  JSON is a data format that stores information in key:value pairs, just like a JavaScript Object does
  In other words, JSON is a specific syntax of JavaScript that is used to serialize certain data types
  Any JSON text is a valid JavaScript expression. Also, some JavaScript is not JSON.
  JSON is commonly used to store and exchange data betweeen a server and web application or browser.
  For example, when you visit a website and login with your username and password, you're submitting data to a server that checks your login credentials and either logs you into the website, or tells you the login information was incorrect.
  In order for the browser and server to communicate and actually log you in or send an error message, the information you entered must be submitted to the server. This is where JSON becomes useful.
  The data being communicated between the browser and server has to be in text format. 
  JSON is text, therefore JSON can be used to communicate with the server!! 
  We know that JSON stands for JavaScript Object Notation. This is because JSON uses JavaScript syntax, but JSON data can still be read and used by any programming language.
  JSON may be stored in its own file with the file extension .json, or put directly into code when it is stored as a string
  Because JSON uses JavaScript notation, any JavaScript object can be converted into JSON and sent to a server.
  Likewise, a server can return JSON data to us, and the JSON data can be converted to JavaScript objects and used as such.

  JSON is especially useful because the data is also human-readable, organized, and easy for us to read and use.

              ///////////////////////////////// Structure ////////////////////////////////

    As you read earlier, JSON syntax is derived from JavaScript object syntax.

    Remember that JavaScript objects are stored in key:value pairs (if you need a refresher on objects, review lesson 1.3 JS Data Types)

    JSON syntax also requires that data is stored in name:value (AKA key:value) pairs.

    JSON data is separated by commas, like the attributes of a JavaScript object

    JSON also allows for nesting, which we will cover in the next section.
    In JSON, curly brackets { } are used to store objects, while square brackets [ ] store arrays.

    These syntax rules are similar to the syntax rules for JavaScript objects, however there are a few notable differences:

      1. JSON name/value pairs both have to be wrapped in double quotation marks(" "), unlike JS objects which only require the value to be wrapped in single or double quotes.
         This rule excludes number values, booleans, and null. 
         Ex: JSON: {"species":"cat"}, {"age": 21}  JS object: {species: "cat"} or {species: 'cat'}, {age: 21}

      2. A JSON object has to be stored in a variable as a string, which is then parsed into JS.
         The JSON object is stored in a string by placing the entirety of the JSON data within a pair of single quotes: ' ' 
         For example, here is JSON data storing student info: 
           { "firstName" : "Millie", "lastName" : "Brown", "grade" : 10 }
         JSON data is always encased in a pair of curly brackets. Remember these are used to store objects. The data within the curly brackets pertains to an object representing a student
    Now, lets store this JSON data in a JavaScript variable:
let studentJSON = '{ "firstName" : "Millie", "lastName" : "Brown", "grade" : 10 }';
// Notice that the key:value pairs must include double quotation marks around both the key and the value(unless the value is a numbe, boolean, or null)
// Lets compare the studentJSON object to a typical JavaScript object storing the same data:

let studentJS = {
    firstName : "Millie",
    lastName : "Brown",
    grade : 10
/* Remember that JS objects don't require keys to be wrapped in quotes, and can use single or double quotes, unlike JSON.
   Notice that the JSON variable is on a single line while the JS object is spread across many lines. JSON objects may also cover multiple lines, they do not have to be contained on a single line.

  3. Another difference between JSON and JS objects is the accepted data types for JSON objects
     A JavaScript object can contain attributes of practically any data type, including a date or a function, as we practiced in earlier lessons
     JSON objects, however, cannot have attributes that are of the following types: 
      - functions
      - dates
      - undefined
    Which means that JSON objects ~*can*~ have attributes of the following data types:
      - strings
      - numbers
      - other JSON objects
      - arrays
      - booleans
      - null
    We'll practice using other JSON objects and arrays as JSON attributes later on.
    JSON object's attributes can be accessed similarly to JS objects, in multiple methods:
       (1) Dot Notation: values of the JSON object can be obtained by specifying the objectName.keyName like so:
        */  dogObj = {"breed":"poodle", "name":"Moxie", "age": 3, "likes":"fluffy toys"};
            console.log( + " is a " + dogObj.age + " year old " + dogObj.breed);

//     (2) Bracket Notation: values of the JSON object can be obtained by specifying the objectName["keyName"] like so:
            catObj = {"breed":"Siamese", "name":"ChiChi", "age": 2, "likes":"napping"};
            console.log(catObj["name"] + " is a " + catObj["age"] + " year old " + catObj["breed"] + "cat");

    // Dot and Bracket notation are also used to modify values of the JSON object:
    // Dot notation modification:
        catObj.age = 2.5;

    // Bracket notation modification:
        dogObj["likes"] = "tennis balls";

    // Note that on lines 96 and 102 when we created the dogObj and catObj, the code is not wrapped in single quotes.
    // When you want to convert a JSON object to a JavaScript object, the JSON text must be stored as a string in order for it to be parsed
    // This is why, when we do want to convert JSON to JS, we place the JSON code in single quotes, like we did on line 63.
    // However, since we're practicing JSON, the dogObj and catObj were not placed within single quotes because we didn't intend to parse the JSON into JS objects.
    // In the next section, we will practice parsing JSON objects into JavaScript.

///////////////////////// Exercises /////////////////////////

//1 Declare a new JSON object named store1; include name:value pairs for the following: 
    // name of store, type of store, number of locations, phone number

//2 Create the equivalent of store1 in a new JS object named store 2

//3 Change the number of locations of store1 to 3. Print the entire store1 object to the console.

//4 Find the errors in the following code; correct the errors in a new object called "correct"
  let song = {"title":"This is America", artist:"Childish Gambino", "releaseYear":"2018", "platinum":"true"};

///////////////////////// JSON Resources /////////////////////////

JSON Documentation

What is JSON and Why Would I Use It?