JavaScript Array creates empty element

Question

var arr = [];
console.log(arr);
console.log("Length: " + arr.length);
arr[1] = [{},{}];
console.log(arr);
console.log("Length: " + arr.length);
arr[3] = [{},{}];
console.log(arr);
console.log("Length: " + arr.length);

So when I create an array like above it gives empty/undefined elements in between.

I want to remove those empty/undefined elements while preserving the index values.

vm.eArray = vm.eArray.filter(function (arr) {
    return arr.length;
});

I'm using the above code to remove the undefined elements but it messes my index/key values.

Or is there any way to avoid it at first place?

Why are you inserting element to array[1] where there is no value in array[0]? — edkeveked
– edkeveked, Commented Nov 29, 2017 at 7:42
Arrays are 0 indexed I think this is being overlooked... facepalm moment for sure :) — shaunhusain
– shaunhusain, Commented Nov 29, 2017 at 7:43

edkeveked · Accepted Answer · 2017-11-29 08:12:46Z

2

Array are an index data structure. So when using them, it is better to keep that structure otherwise there is no use to use an array. For your use case, you can use whether a Map(), or an array of Json element.

Using a Map, your indexes (1, 2, 3) can become directly the keys of your array.
Another solution could be to use an array of Json element, where each element has a key and a value

var myMap = new Map();
//to add the element with index 1
myMap.set(1, [{},{}]);

//to add the element with index 3
myMap.set(3, [{},{}]);

// you can iterate over them if you want like an array
console.log("with a map")
myMap.forEach((key, value) => console.log(key, value));

// using a Json object

var myObject = [];
myObject.push({id: 1, value:[{},{}]})
myObject.push({id: 3, value:[{},{}]})

//iterate over it, because it is still an array, but of Json element
console.log("with array of json")
for (element of myObject){
  console.log(element.id, element.value)
}

edited Nov 29, 2017 at 8:12

answered Nov 29, 2017 at 8:02

edkeveked

18.4k10 gold badges60 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Keyur Shah Over a year ago

I have used Json object. Thanks for your efforts. Now i understand the use of map as well

Omaim · Accepted Answer · 2017-11-29 07:47:40Z

2

var arr = new Map();
console.log(arr);
console.log("Length: " + arr.size);
arr.set(1,[{},{}]);
console.log(arr);
console.log("Length: " + arr.size);
arr.set(3,[{},{}]);
console.log(arr);
console.log("Length: " + arr.size);

You can use Map(), and get the size using map.size.

answered Nov 29, 2017 at 7:47

Omaim

2443 silver badges9 bronze badges

2 Comments

Keyur Shah Over a year ago

can i use angular.forEach or ng-repeat on map? or

Keyur Shah Over a year ago

I was on that same page. Thanks anyways

Devin · Accepted Answer · 2017-11-29 09:54:16Z

1

I would just use an object to store your values.

    var arr = {};
    console.log(arr);
    console.log("Length: " + Object.keys(arr).length);
    arr[1] = [{},{}];
    console.log(arr);
    console.log("Length: " + Object.keys(arr).length);
    arr[3] = [{},{}];
    console.log(arr);
    console.log("Length: " + Object.keys(arr).length);

    for (something in arr){
      console.log(arr[something]);
    }

edited Nov 29, 2017 at 9:54

answered Nov 29, 2017 at 9:49

Devin

1349 bronze badges

Comments

Madhavan.V · Accepted Answer · 2017-11-29 07:44:31Z

0

You are assigning value arr[1] = arr[1] = [{},{}]; at index 1. So you are skipping index 0. By default, javascript will place undefined there.

answered Nov 29, 2017 at 7:44

Madhavan.V

8451 gold badge6 silver badges14 bronze badges

Collectives™ on Stack Overflow

JavaScript Array creates empty element

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related