The JavaScript Object Notation

Introduction

The JavaScript Object Notation, or JSON, is a meta-language used to create sections of text in a format that can be easily read, analyzed, and interpreted.

A JSON File

JSON is created as a text-based document. After starting or creating the document, save it with the .json extension. If you are working in Microsoft Visual Studio, to add a JSON file to a project, in the Solution Explorer, right-click either the name of the project or the folder that will host the file, position the mouse on Add, and click New Item... In the left frame of the Add New Item dialog box, click Web and click Markup. In the middle frame, click JSON file. Accept the suggested name of the file or change it. When you are ready, click OK.

Introduction to the Structure of a JSON Document

A JSON document is made of one or more JavaScript objects. Remember that, in JavaScript and TypeScript, the body of an object starts with an opening curly bracket { and ends with a closing curly bracket }. To have an empty or null object, you can leave the curly brackets empty. Otherwise, inside the brackets, you can create one or more properties. A property is created as a name : value expression. Inside the brackets, you can create as many properties as you want.

The name of a property can be anything, such as an alphabetical letter, a non-readable symbol, a number, a word, or an expression. In JSON (unlike objects in JavaScript), the name of a property must be included in double-quotes.

As we saw already when studying objects, a value of a property can be a string, in which case it would be included in double-quotes. Here is an example:

{
    "toyName": "Mini Point of Sale Station"
}

In the same way, you can create as many properties as you want in the object. The properties must be separated by commas. Here is an example:

JSON File: Toys.json

{
  "M":"Mini Point of Sale Station",
  "@":"Drawing Black Board",
  "2":"Kid Ferry Boat",
  "true":"Easter Egg Decorating Set"
}

Opening a JSON File

As mentioned already, a JSON file is just a text-based document. You can use any text editor to open it.

A JSON Object

To give you programmatic access to the contents of a JSON document, the JavaScript language provides an object named JSON. It is equipped with just a few but valuable members.

Characteristics of a JSON Document

The Value as a Number

The value of a property of a JSON object can be a number. In this case, after specifying the name of the property and its colon, type its numeric value. Here is an example:

{ "itemNumber": 937495 }

A Boolean Value

The value of a property can be Boolean. In this case, set it as true or false. Here is an example:

{
    "itemNumber": 749374,
    "toyName": "Kid Ferry Boat",
    "unitPrice": 24.86,
    "needsParentalSupervision" : true
}

The Value as an Object

The value of a property can be an object. To create it, specify the double-quoted name of the property and its colon followed by curly brackets. For an undefined property, leave the curly brackets empty. If the object needs only one property, in the curly brackets of the object of the property, enter a double-quoted name, a colon, and the desired value. Here is an example:

{
  "toyName": "Construction Vehicles Toy Set ",
  "power": { "batteries" : "None" }
}

In the same way, you can create as many properties as you need in the object of a property. Here are examples:

{
    "accountNumber": "792-030-973",
    "customerName": {
        "firstName": "Doris",
        "MI": "P",
        "lastName": "Papadopoulos",
        "isMarried": true 
    },
    "address": {
        "location": "3748 Earstern Ave",
        "city": "Lancaster",
        "state": "PA"
    },
    "category": "Residential",
    "contact": {
        "emailAddress": "dpapa@mailcity.com",
        "phoneNumber": "103-084-9741",
        "alwaysAvailableToChat": false, 
        "socialPage": "My Space: Papadopoulos Business"
    }
}

A Null Value

If you don't have a value for a property, you can set it as null. Here is an example:

{
  "toyName": "Construction Vehicles Toy Set ",
  "batteries" : null
}

JSON and Arrays

Introduction

An array is an item that starts with an opening square bracket [ and ends with a closing square bracket ]. Here is an example:

[]

This is referred to as an empty array. Normally, to make it useful, an array should contain one or more values. Here is an example:

[ "Mini Point of Sale Station",
  "Drawing Black Board",
  "Kid Ferry Boat",
  "Easter Egg Decorating Set" ]

A JSON Document as an Array of Objects

The items of a JSON file are a collection of values. For this reason, you should put them in an array. A collection of strings as seen above is simple and one-dimensional. If you want each item to hold more information, you should create the collection as an array of objects.

An array of objects is a collection that contains objects. To get such an array in your JSON document, you can create an object in square brackets. Here is an example:

[{
    "itemNumber": 937495,
    "toyName": "Mini Point of Sale Station",
    "unitPrice": 32.64
}]

In your JSON document, you can create as many objects as you want inside the square brackets of the array. The objects must be separated with commas. Here is an example:

[
  {
    "itemNumber": 937495,
    "toyName": "Mini Point of Sale Station",
    "unitPrice": 32.64,
    "requiresBatteries": true
  },
  {
    "itemNumber": 309581,
    "requiresBatteries": true,
    "toyName": "Drawing Black Board",
    "unitPrice": 18.45
  },
  {
    "itemNumber": 749374,
    "toyName": "Kid Ferry Boat",
    "unitPrice": 24.86
  },
  {
    "itemNumber": 583049,
    "toyName": "Easter Egg Decorating Set",
    "unitPrice": 32.04,
    "requiresBatteries": false
  }
]

A JSON Value as an Array

The value of a property of a JSON item can be an array. Here are examples:

[
  {
    "employeeNumber": 927049,
    "fullName": [ "James", "H", "Daniels" ],
    "hourlySalary": 21.86,
    "filingStatus": [ "Married", 3 ],
    "children": [
	        {
    	        "name": "Reobert Sanford",
            	"age": 8
        	},
	        {
    	        "name": "Annette Binam",
            	"age": 10
        	},
	        {
            	"name": "Lydia Major",
        	    "age":  12
    	    }
    ]
  }
]

An Object for a Property

We saw that the value of a property could be an object. Here is an example of a JSON document that contains one object in an array:

[{
    "accountNumber": "792-030-973",
    "customerName": {
        "firstName": "Doris",
        "MI": "P",
        "lastName": "Papadopoulos"
    },
    "address": {
        "location": "3748 Earstern Ave",
        "city": "Lancaster",
        "state": "PA"
    },
    "category": "Residential",
    "contact": {
        "emailAddress": "dpapa@mailcity.com",
        "phoneNumber": "103-084-9741",
        "socialPage": "My Space: Papadopoulos Business"
    }
}]

As mentioned previously, the value of a property of an object can be an array. Such an array can itself be a collection of objects. Here are examples:

[
  {
    "repairNumber": 100001,
    "car": { "make": "Toyota", "model": "Corolla", "year": 2010 },
    "partsUsed": [{
		            "partName": "Air Filter",
    		        "price": 8.95
    		    },
		        {
    		        "partName": "Gasket Intake Manifold",
    		        "price": 225.67
    		    },
    		    {
 		           "partName": "Front Wheel Hub Bearing Kit",
    		        "price": 96.88
    		    },
 		       {
    	        "partName": "Oil Seal",
    	        "price": 6.34
    	    }],
    "jobsPerformed": [
	        {
    	        "jobName": "Performed complete tune-up",
    	        "price": 54.85
    	    },
    	    {
    	        "jobName": "Balanced the tires",
    	        "price": 19.95
    	    }]
    }
]

Introduction to a TypeScript Configuration File

Introduction to Configuration Files

After or when creating an application that uses TypeScript, when you build your project, this action asks the TypeScript compiler (tsc) to execute. The TypeScript compiler would start looking for the TypeScript file in your project, from the root of the project and to every directory. You can assist the TypeScript compiler to make better decisions regarding your particular project. To assist the compiler, you can create a configuration file.

A configuration file is a document that gives instructions to a compiler about some details necessary for an application. When you create an ASP.NET application in Microsoft Studio, the studio automatically creates at least one configuration file named web.config, which is an XML file. An application that contains TypeScript code also may need a configuration file. Such a document is created as a JSON file, nreferred to as a TypeScript configuration file.

Creating a TypeScript Configuration File

Although you can create TypeScript configuration file from scratch, if you are working in Microsoft Visual Studio, display the Add New Item dialog box. Select TypeScript JSON Configuration File. You should accept the default name and click tsconfig.json.

Primary Characteristics of TypeScript Configuration File

Introductiopn

When you create a TypeScript configuration file in Microsoft Visual Studio, the studio generates a JSON document for you. The document contains an object. The studio creates some default properties in that object. In most cases, you will change or replace some of the properties in that object.

Including Files by a Pattern

When creating one or more TypeScript files for your project, you can store them in folders of your choice. When you build your project, the TypeScript compiler may visit each folder of your project to locate those files. If you don't want the TypeScript compiler to check every folder, you can specify the folder to check. To do that, in your TypeScript configuration file, you can create a property named include and set its value as an array. That property will hold a list of directories that the compiler should visit when looking for TypeScript files. Normally, you will use wildcards to indicate how the compiler should proceed.

Excluding Files by a Pattern

When creating your TypeScript file, you can decide for sure what folder(s) woun't not contain the files. In this case, you can ask the TypeScript compiler to ignore some folders. To do that, in your TypeScript configuration file, you may create a property named exclude. The value of this property is an array that is a list of directories that the compiler should not consider when checking the folders that may contain TypeScript files. The exclude property uses wildcards.

A List of TypeScript Files

The include the exclude properties of the object in the TypeScript configuration file are mainly used to identify folders using wildcards. An alternative is to create a property named files. The value of this property is an array. It holds a list of the TypeScript files that you want the TypeScript compiler to translate into their JavaScript equivalent.

Compiler Options

After locating the TypeScript file(s) that your application will need, When you build your project, the TypeScript compiler must compile the TypeScript file(s) in JavaScript. The compiler is already equipped to follow some default recommendations. As an alternative, you can give some instructions to the TypeScript compiler. To do that, in your TypeScript configuration, create a property named compilerOptions and set its value as an object:

{
  "compilerOptions": {
    . . .
  },
  . . .
}

Like its name suggests, the compilerOptions property contains a list of the features that the TypeScript compiler will need to appropriately deal with the application:

Saving Upon Compiling

In the object of your TypeScript configuration file, you can create a property named compileOnSave. This Boolean property asks the compile to immediately save each file after compiling it. This would produce a new or updated version of the JavaScript file.
Previous Copyright © 2018-2019, FunctionX Next