ARTICLE

Insert Elements in TypeScript Array

Posted by Nitin Bhardwaj Articles | TypeScript November 27, 2012
Tags: array in typescript, elements in array, Insertion Elements in Array, TypeScript
In this article I will explain what an array is and how to insert elements in a TypeScript array with an example.
Reader Level:

Insert Elements in TypeScript Array

An array is a collection that contains one or more items called elements. Each of these elements can be an object. For instance, you can store numbers, strings, and Date objects in the same array. The length of an array is the number of elements in the array. If you create an array without specifying the length, the array doesn't contain any elements. If you use an index then 0 is the first element, 1 is the second element, and so on.

Insertion in an array does not mean increasing an array size.

Example

The following example describes how to insert an element into a TypeScript array. For example, suppose an array a[20] has four elements in it initially and a[0] = 2, a[1] = 4, a[2] = 6 and a[3]=8. You want to insert a value 5 at location 2 i.e. a[1] = 5, so we have to move elements one step below so after insertion a[2] = 4 which was a[1] initially, and a[1]=5, a[0] = 2, a[3] = 6 and a[4]=8. Array insertion is not increasing its size i.e array will not be containing 21 elements. It is very simple and works as follows.

Step 1

Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project". A window is opened. Provide the name of  your application like "Insert_Element_in_Array", then click on the Ok button.

Step 2

After Step 1 your project has been created. Solution Explorer, which is at the right side of Visual Studio, contains the following:

  • css: This is the design stylesheet file. Styles define how to display HTML elements.
  • ts: This is the TypeScript file. All classes and functionality are defined in this file.
  • js: This is the JavaScript file. This file is created from the TypeScript file.

Step 3

Insert_Element_in_Array.ts

class insert_element

{

    element()

    {

        var pos, c, n, value;

        var array: number[] = [100];

        n = parseInt(prompt("Enter number of elements in array"));

        for (c = 0; c < n; c++)

            array[c] = parseInt(prompt("Enter " + n + " integers"));

        for (var x = 0; x < n; x++) {

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

            span.style.color = "Green";

            span.innerText = "Enter " + x + " Element -> " + array[x] + "\n";

            document.body.appendChild(span);

        }       

        pos = parseInt(prompt("Enter the location where you wish to insert an element"));

        if (pos <= array.length) {

            value = parseInt(prompt("Enter the value to insert"));

            for (c = n - 1; c >= pos - 1; c--)

                array[c + 1] = array[c];

                array[pos - 1] = value;

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

                span1.style.color = "red";

                span1.innerText = "Resultant array is \n" ;

                document.body.appendChild(span1);

            for (c = 0; c <= n; c++)

            {

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

                span.style.color = "Blue";

                span.innerText ="Array Element "+c+" -> " +array[c]+"\n" ;

                document.body.appendChild(span);

            }

        }

        else {

            alert("Enter location is greater than array lenght so Re-try");

        }

    }

}

window.onload = () => {

    var greeter = new insert_element();

    greeter.element();

};


InsertDemo.html
 

<!DOCTYPEhtml>

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

<head>

    <metacharset="utf-8"/>

    <title>TypeScript HTML App</title>

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

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

</head>

<body>

    <h2>Insert Element in Array</h2>

    <divid="content"/>

</body>

</html>


app.js
 

var insert_element= (function () {

    function insert_element() { }

    insert_element.prototype.element = function () {

        var pos;

        var c;

        var n;

        var value;

 

        var array = [

            100

        ];

        n = parseInt(prompt("Enter number of elements in array"));

        for(c = 0; c < n; c++) {

            array[c] = parseInt(prompt("Enter " + n + " integers"));

        }

        for(var x = 0; x < n; x++) {

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

            span.style.color = "Green";

            span.innerText = "Enter " + x + " Element -> " + array[x] + "\n";

            document.body.appendChild(span);

        }

        pos = parseInt(prompt("Enter the location where you wish to insert an element"));

        if(pos <= array.length) {

            value = parseInt(prompt("Enter the value to insert"));

            for(c = n - 1; c >= pos - 1; c--) {

                array[c + 1] = array[c];

            }

            array[pos - 1] = value;

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

            span1.style.color = "red";

            span1.innerText = "Resultant array is \n";

            document.body.appendChild(span1);

            for(c = 0; c <= n; c++) {

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

                span.style.color = "Blue";

                span.innerText = "Array Element " + c + " -> " + array[c] + "\n";

                document.body.appendChild(span);

            }

        } else {

            alert("Enter location is greater than array lenght so Re-try");

        }

    };

    return insert_element ;

})();

window.onload = function () {

    var greeter = new insert_element();

    greeter.element ();

};

 

Output 1


Enter the number of elements in array and then click on ok.


enter-element-num.jpg

 

Output 2


Enter elements

element-0.jpg


element-1.jpg


element-2.jpg


element-3.jpg

Output 3


Then enter the location where you wish to insert an element


location-element.jpg

Output 4


Enter the value to insert


enter-location-num.jpg

Output 5


resultant-array.jpg

Output 6


And if the specified location is greater than the array length then:


Error-0.jpg


Error-1.jpg

 

Login to add your contents and source code to this article
This Feature is Sponsored By DynamicPDF Merger is a developers dream for interacting with any existing PDF documents. Merge, append, split, form fill, flatten stamp and so much more.
post comment
     

Thank U sir

Posted by Nitin Bhardwaj Nov 30, 2012

Very good, Nitin. This will go good with your Binary Search in TypeScript.

Posted by Sam Hobbs Nov 29, 2012
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
Join a Chapter
TRENDING UP
MOST LIKED ARTICLE
HOT KEYWORDS
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Get Career Advice from Experts
WHITEPAPERS AND BOOKS
Hosted By CBeyond Cloud Services MVPs MOST VIEWEDLEGENDSNOW PRIZESAWARDSREVIEWSSURVEYCERTIFICATIONSDOWNLOADS
PRIVACY POLICY | TERMS & CONDITIONS | SITEMAP | CONTACT US | ABOUT US | REPORT ABUSE
©2013 C# Corner. All contents are copyright of their authors.