Reader Level:
ARTICLE

Insert Elements in TypeScript Array

Posted by Nitin Bhardwaj Articles | TypeScript November 27, 2012
In this article I will explain what an array is and how to insert elements in a TypeScript array with an example.
  • 0
  • 0
  • 5597

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

 

COMMENT USING

Trending up