title: How to put some array elements from the middle to last in Javascript
body: <p>I have this following JS object array whose elements are just columns of a HTML table :</p>
  
  <pre><code>var my_cols = [
    {
      "id": "name",
      "header": [
        "Name",
        {
          "content": "textFilter"
        }
      ],
      "width": 200,
      "sort": "string"
    },
    {
      "id": "type",
      "header": [
        "Type",
        {
          "content": "textFilter"
        }
      ],
      "width": 180,
      "sort": "string"
    },
    {
      "id": "dob",
      "header": [
        "DOB",
        {
          "content": "textFilter"
        }
      ],
      "width": 100,
      "sort": "string"
    },
    {
      "id": "merged_a",
      "header": [
        {
          "text": "merged_a",
          "colspan": 3
        },
        {
          "text": "port"
        },
        {
          "content": "textFilter"
        }
      ],
      "width": 200,
      "sort": "string"
    },
    {
      "id": "merged_b",
      "header": [
        null,
        {
          "text": "merged_b"
        },
        {
          "content": "textFilter"
        }
      ],
      "width": 200,
      "sort": "string"
    },
    {
      "id": "merged_c",
      "header": [
        null,
        {
          "text": "merged_c"
        },
        {
          "content": "textFilter"
        }
      ],
      "width": 200,
      "sort": "string"
    },
    {
      "id": "place",
      "header": [
        "place",
        {
          "content": "textFilter"
        }
      ],
      "width": 300,
      "sort": "string"
    },
    {
      "id": "address",
      "header": [
        "address",
        {
          "content": "textFilter"
        }
      ],
      "width": 200,
      "sort": "string"
    },
    {
      "id": "phone",
      "header": [
        "phone",
        {
          "content": "textFilter"
        }
      ],
      "width": 200,
      "sort": "string"
    }
  ];
  </code></pre>
  
  <p>I want to put elements with id as 'merged_a' , 'merged_b', and 'merged_c' at the end of the entire array my_cols. I have written the below code so far, however it is not giving me the exact result:</p>
  
  <pre><code>var my_cols= [{"id":"name","header":["Name",{"content":"textFilter"}],"width":200,"sort":"string"},
  {"id":"type","header":["Type",{"content":"textFilter"}],"width":180,"sort":"string"},
  {"id":"dob","header":["DOB",{"content":"textFilter"}],"width":100,"sort":"string"},
  {"id":"merged_a","header":[{"text":"merged_a","colspan":3},{"text":"port"},{"content":"textFilter"}],"width":200,"sort":"string"},
  {"id":"merged_b","header":[null,{"text":"merged_b"},{"content":"textFilter"}],"width":200,"sort":"string"},
  {"id":"merged_c","header":[null,{"text":"merged_c"},{"content":"textFilter"}],"width":200,"sort":"string"},
  {"id":"place","header":["place",{"content":"textFilter"}],"width":300,"sort":"string"},
  {"id":"address","header":["address",{"content":"textFilter"}],"width":200,"sort":"string"},
  {"id":"phone","header":["phone",{"content":"textFilter"}],"width":200,"sort":"string"}];
  </code></pre>
  
  <p>My effort</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var my_cols = [
     { "id": "name", "header": [ "Name", { "content": "textFilter" } ], "width": 200, "sort": "string" }, 
     { "id": "type", "header": [ "Type", { "content": "textFilter" } ], "width": 180, "sort": "string" }, 
     { "id": "dob", "header": [ "DOB", { "content": "textFilter" } ], "width": 100, "sort": "string" }, 
     { "id": "merged_a", "header": [{ "text": "merged_a", "colspan": 3 }, { "text": "port" }, { "content": "textFilter" } ], "width": 200, "sort": "string" }, 
     { "id": "merged_b", "header": [ null, { "text": "merged_b" }, { "content": "textFilter" } ], "width": 200, "sort": "string" }, 
     { "id": "merged_c", "header": [ null, { "text": "merged_c" }, { "content": "textFilter" } ], "width": 200, "sort": "string" }, 
     { "id": "place", "header": [ "place", { "content": "textFilter" } ], "width": 300, "sort": "string" }, 
     { "id": "address", "header": [ "address", { "content": "textFilter" } ], "width": 200, "sort": "string" },
     { "id": "phone", "header": [ "phone", { "content": "textFilter" } ], "width": 200, "sort": "string" } 
   ];
  
  for (var i in my_cols) {
  
    var col = my_cols[i];
    var a_col;
    var b_col;
    var c_col;
    if (col.hasOwnProperty('id')) {
      if (col['id'] == 'merged_a') {
        a_col = my_cols.splice(i, 1);
      }
      if (col['id'] == 'merged_b') {
        b_col = my_cols.splice(i, 1);
      }
      if (col['id'] == 'merged_c') {
        c_col = my_cols.splice(i, 1);
      }
    }
  
  }
  
  my_cols.push(a_col);
  my_cols.push(b_col);
  my_cols.push(c_col);
  
  console.log("my_cols = " + JSON.stringify(my_cols));</code></pre>
  </div>
  </div>
  </p>