Post
Ask Question

Insert Elements in TypeScript Array

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 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 functions 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
  1. class insert_element  
  2. {  
  3.  element()  
  4.  {  
  5.   var pos, c, n, value;  
  6.   var array: number[] = [100];  
  7.   n = parseInt(prompt("Enter number of elements in array"));  
  8.   for (c = 0; c < n; c++)  
  9.    array[c] = parseInt(prompt("Enter " + n + " integers"));  
  10.   for (var x = 0; x < n; x++) {  
  11.    var span = document.createElement("span");  
  12.    span.style.color = "Green";  
  13.    span.innerText = "Enter " + x + " Element -> " + array[x] + "\n";  
  14.    document.body.appendChild(span);  
  15.   }  
  16.   pos = parseInt(prompt("Enter the location where you wish to insert an element"));  
  17.   if (pos <= array.length) {  
  18.    value = parseInt(prompt("Enter the value to insert"));  
  19.    for (c = n - 1; c >= pos - 1; c--)  
  20.     array[c + 1] = array[c];  
  21.    array[pos - 1] = value;  
  22.    var span1 = document.createElement("span1");  
  23.    span1.style.color = "red";  
  24.    span1.innerText = "Resultant array is \n";  
  25.    document.body.appendChild(span1);  
  26.    for (c = 0; c <= n; c++)  
  27.    {  
  28.     var span = document.createElement("span");  
  29.     span.style.color = "Blue";  
  30.     span.innerText = "Array Element " + c + " -> " + array[c] + "\n";  
  31.     document.body.appendChild(span);  
  32.    }  
  33.   } else {  
  34.    alert("Enter location is greater than array lenght so Re-try");  
  35.   }  
  36.  }  
  37. }  
  38. window.onload = () => {  
  39.  var greeter = new insert_element();  
  40.  greeter.element();  
  41. };  
InsertDemo.html
  1. <!DOCTYPEhtml>  
  2. <htmllang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <metacharset="utf-8"/>  
  6.         <title>TypeScript HTML App</title>  
  7.         <linkrel="stylesheet"href="app.css"type="text/css"/>  
  8.         <scriptsrc="app.js">  
  9.         </script>  
  10.     </head>  
  11.     <body>  
  12.         <h2>Insert Element in Array</h2>  
  13.         <divid="content"/>  
  14.     </body>  
  15. </html>  
app.js
  1. var insert_element = (function() {  
  2.  function insert_element() {}  
  3.  insert_element.prototype.element = function() {  
  4.   var pos;  
  5.   var c;  
  6.   var n;  
  7.   var value;  
  8.   var array = [  
  9.    100  
  10.   ];  
  11.   n = parseInt(prompt("Enter number of elements in array"));  
  12.   for (c = 0; c < n; c++) {  
  13.    array[c] = parseInt(prompt("Enter " + n + " integers"));  
  14.   }  
  15.   for (var x = 0; x < n; x++) {  
  16.    var span = document.createElement("span");  
  17.    span.style.color = "Green";  
  18.    span.innerText = "Enter " + x + " Element -> " + array[x] + "\n";  
  19.    document.body.appendChild(span);  
  20.   }  
  21.   pos = parseInt(prompt("Enter the location where you wish to insert an element"));  
  22.   if (pos <= array.length) {  
  23.    value = parseInt(prompt("Enter the value to insert"));  
  24.    for (c = n - 1; c >= pos - 1; c--) {  
  25.     array[c + 1] = array[c];  
  26.    }  
  27.    array[pos - 1] = value;  
  28.    var span1 = document.createElement("span1");  
  29.    span1.style.color = "red";  
  30.    span1.innerText = "Resultant array is \n";  
  31.    document.body.appendChild(span1);  
  32.    for (c = 0; c <= n; c++) {  
  33.     var span = document.createElement("span");  
  34.     span.style.color = "Blue";  
  35.     span.innerText = "Array Element " + c + " -> " + array[c] + "\n";  
  36.     document.body.appendChild(span);  
  37.    }  
  38.   } else {  
  39.    alert("Enter location is greater than array lenght so Re-try");  
  40.   }  
  41.  };  
  42.  return insert_element;  
  43. })();  
  44. window.onload = function() {  
  45.  var greeter = new insert_element();  
  46.  greeter.element();  
  47. };  
Output 1
 
Enter the number of elements in an 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


Similar Articles