Array in javascript not printing as per key insertion order

Question

Below is the code snippet.

Expected : The output of the alert must be:

210 then 202 then 201

Working currently :

201 then 202 and 210.

Issue is, I want in insertion order and not in sorted order.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>

var newItem = new Array();

newItem['210'] = new Array(1,'test1');
newItem['202'] = new Array(2,'test1');
newItem['201'] = new Array(3,'test1');

for(var item in newItem) {
   alert(item);
}

</script>

</body>
</html>

Arrays are ordered. Why would you expect insertion order to be preserved when you add directly to indeces? I don't even know of any language that preserves the order of insertion. — VLAZ, Nov 03 '16 at 20:00
Also, don't use `for...in` when iterating over arrays http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-a-bad-idea — VLAZ, Nov 03 '16 at 20:01
I also wouldn't use `new Array()`. `var newItem = [];` and then `newItem.push(...);` — Gavin, Nov 03 '16 at 20:02
@Sharad Please remember to accept any answer that helps you resolve your issue so that others can learn from your question in the future. — tmslnz, Nov 03 '16 at 20:29

score 5 · Accepted Answer · answered Nov 03 '16 at 20:06

If you want to go with insertion order, and strings as keys, use a Map.

From the documentation

A Map object iterates its elements in insertion order — a for...of loop returns an array of [key, value] for each iteration.

let newItem = new Map();

newItem.set('210', [1,'test1']);
newItem.set('202', [2,'test1']);
newItem.set('201', [3,'test1']);

for ( let item of newItem ) console.log(item);

score 2 · Answer 2 · answered Nov 03 '16 at 20:02

2

A couple things - arrays have one value per index slot, like this:

[1,2,3,4]

What you're creating above is a key/value pair, which in JavaScript is an object - object keys have no sort order - so getting them in the order they were inserted just isn't going to happen. What you want is an array of objects

var arr = [];
var obj = { '201' : [1, 'test1'] }
//create the rest of your objects
arr.push(obj);

And another note, when you iterate an array, you use the regular for syntax - when you iterate an object, use for..in

for (var i = 0; i < arr.length; i++) {
    var objKeys = Object.keys(arr[i]); //get the keys of the object being iterated over
    console.log(objKeys[0]); //log the first key (since your objects only have 1 key
}

answered Nov 03 '16 at 20:02

tymeJV

103,943
14
161
157

In ES6 you can use `for...of` loops or `forEach()` to iterate arrays. There's no need to use regular `for` loops anymore. – Michał Perłakowski Nov 03 '16 at 20:11
2

Until ES6 is the standard - I'll stick with my regular loops. – tymeJV Nov 03 '16 at 20:11
Are you kidding? ES6 is the standard since June 2015, when it was finalized. – Michał Perłakowski Nov 03 '16 at 20:12
That was an extremely poor choice of words by me - sorry about that - basically comes down to *I* can't use it yet because of browser support. – tymeJV Nov 03 '16 at 20:14
IMO lack of browser support is not a reason to not use ES6. The only reasonable options are either dropping support for older browsers, or compiling your code with Babel. – Michał Perłakowski Nov 03 '16 at 20:17
1

@Gothdo - most of us still have to write code that works for most people. ES2015 hardly works in modern browsers, and not at all in older browsers, and isn't something I would use in production on the clientside. I actually think ES5 answers are still preferable, yet I myself answered with a ES2015 solution, as that seems to be acceptable these days. – adeneo Nov 03 '16 at 20:25

score 0 · Answer 3 · answered Nov 03 '16 at 20:20

Use can set the key, that is "210", "202", "201" as the first element of the created array for each key; use Array.of() to set created arrays as element; iterate array created with Array.of() at for..of loop. Optionally utilize Array.prototype.entries() chained to created array to confirm index of created array containing key as first element within array.

let items = Array.of(["210", 1, "test1"]
                    , ["202", 2, "test1"]
                    , ["201", 3, "test1"]);

for (let [key, value] of items.entries()) {
  // do stuff
  console.log(key, value)
};

score -1 · Answer 4 · answered Nov 03 '16 at 20:06

-1

Below a very simple code example for what you are trying to achieve, based on your question's expected output.

var newItem = [];

newItem.push('210');
newItem.push('202');
newItem.push('201');

newItem.forEach( value => console.log(value) )

answered Nov 03 '16 at 20:06

tmslnz

1,801
2
15
24

Please, why the downvote for a simple answer to the OP's desired output of `210 then 202 then 201` – tmslnz Nov 03 '16 at 20:11

Array in javascript not printing as per key insertion order

4 Answers4