Reader Level:
ARTICLE

How To Use Associative Array in TypeScript

Posted by Nitin Bhardwaj Articles | TypeScript November 23, 2012
In this article I will explain what an associative array is and how to use them in TypeScript with an example.
  • 0
  • 0
  • 4722

Associative Array in TypeScript

An array is an object that contains one or more items called elements. Each of these elements can be a primitive data type or an object. For instance, you can store numbers, strings, and Date objects in the same array.

Associative arrays provide another way to store information.. An associative array is an array that uses string as the indexes. You can create a mixed array with numeric and string indexes within a single array. if you mix numeric and string indexes in an array then the length will indicate only the number of elements with numeric indexes. Associative arrays are very similar to numeric arrays in terms of functionality but they are different in terms of their index. In an associative array, each ID key is associated with a value.

Example

The following example describes how to use an associative array in TypeScript. In this code, we enter the employee name of the information you want. If the specified employee name is present in the array then it returns the employee information and if the employee name is not present in the array list then it shows the NO Information message. It is very simple and works as follows.

Step 1

Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project". A window will then be opened. Specify a name for the application, like "Associative_Array", then click on the Ok button.

Step 2

After Step 1 your project has been created. The Solution Explorer, which is at the right side of Visual Studio, contains the js file, ts file, css file and html files.

Step 3

Associative.ts

class Associative_array

{

    EmpInfo()

    {

        var information= new Array()

 information["Dinesh"]="Dinesh Beniwal is Administrator of C# corner. His expert arears are ASP.NET, ADO.NET, HTML and PHP.";

        information["Mahesh"]="Mahesh Chand is founder of C# Corner. Mahesh has been  

        awarded prestigious Microsoft MVP Award for 7 consecutive years for his    

        contributions to the developer community.";

        information["Manish"]="Manish is Very much interested in Microsoft & LifeStyle

        Accessory Designand working with Microsoft technologies. His expert areas are

        ASP.NET, ADO.NET, C# .NET and WPF.";

 

        var info=prompt("Whose Employee information do you want?","");

 

        if ((info == "Dinesh") || (info == "Mahesh") || (info == "Manish"))

        {

            var y = document.createElement("y");

            y.innerText = information[info];

            document.body.appendChild(y);

        }

        else

            alert("No Information");

     }

   

}

window.onload = () =>

{

    var greeter = new Associative_array();

    greeter.EmpInfo();

};


Demo.html

 

<!DOCTYPEhtml>

 

<htmllang="en"xmlns="http://www.w3.org/1999/xhtml">

<head>

    <metacharset="utf-8"/>

    <title>Associative array</title>

    <linkrel="stylesheet"href="app.css"type="text/css"/>

    <scriptsrc="app.js"></script>

</head>

<body>

    <h2>Associative Array in TypeScript</h2>

    <h3style="color:#8a2323"> Employee Information</h3>

    <divid="content"/>

</body>

</html>


app.js

 

var Associative_array = (function () {

    function Associative_array() { }

    Associative_array.prototype.EmpInfo = function () {

        var information = new Array();

        information["Dinesh"] = "Dinesh Beniwal is Administrator of C# corner. His expert arears are ASP.NET, ADO.NET, HTML and PHP.";

        information["Mahesh"] = "Mahesh Chand is founder of C# Corner. Mahesh has been awarded prestigious Microsoft MVP Award for 7 consecutive years for his contributions to the developer community.";

        information["Manish"] = "Manish is Very much interested in Microsoft & LifeStyle Accessory Designand working with Microsoft technologies. His expert areas are ASP.NET, ADO.NET, C# .NET and WPF.";

        var info = prompt("Whose Employee information do you want?","");

        if((info == "Dinesh") || (info == "Mahesh") || (info == "Manish")) {

            var y = document.createElement("y");

            y.innerText = information[info];

            document.body.appendChild(y);

        } else {

            alert("No Information");

        }

    };

    return Associative_array;

})();

window.onload = function () {

    var greeter = new Associative_array();

    greeter.EmpInfo();

};

 

Output 1

Enter the employee name for the information and then click on ok


 enter-emp-name.jpg

Output 2

 

 Result.jpg

Output 3

If the specified name is not present in the array then:

 

 enter-wrong-emp-name.jpg

 This is message displayed:

wrong-msg.jpg

 

COMMENT USING

Trending up