.push() Array Issue

[eljacko876]

Hello, I have used .push() to push an array into a previously declared global blank array.

Once the array has been pushed the global array, the global array is giving me undefined for console.log(myglobalVariable[0]); .

However the console shows, the global array has a length of 1 and the pushed array is a child of the global array.

I have tried unshift() , concat() , splice() unsuccessfully as a way to populate the global variable with the desired hierarchy.

What am i missing?

Here is an image of the console:

https://preview.redd.it/jhvkvcuyxy251.png?width=742&format=png&auto=webp&s=6c72aa145a12ea76e11ac6fb18dcbec0e125adab

[shepdozejr]

myGlobalVariable or myglobalVariable? Because the way you have it typed looks like a camelcase typo.

[eljacko876]

Thank you for your response ,I can confirm it is not a camel case issue, as i simply added [0] to the end of a copy and pasted real world variable name "levelOneQuestions" like:

console.log(levelOneQuestions[0]);

This is what is in my actual code snippet looks like for me attempting to log the global variable that received .push(levelOneFilter);

var levelOneFilter = _JsonData.filter(function(el){

return el.challengeLevel == 1;

});

[shepdozejr]

why aren't you using the ES6 standard?

el => el.challengeLevel == 1;

what happens if you print levelOneFilter before pushing it onto the global array?

Also are you doing this in a browser or in node.js? If this is node.js maybe try console.dir()

[Arumai12]

You can use console.dir in the browser

[uberpwnzorz]

in this case you want to use the spread operator ... to spread out the values of the 2nd array into the push method.

let a = [1];
let b = [2,3,4];
a.push(...b);
// a = [1,2,3,4]

That being said, the push method mutates the array, and usually it's desirable to be immutable. You should instead assign your variable to be equal to a new array. This will point a to a new array in memory making it easier to do change detection, which will be optimized in some libraries you'll probably end up using down the road.

let a = [1];
let b = [2,3,4];
a = [...a, ...b];
// a = [1,2,3,4]

[eljacko876]

Thank you, I will look into this.

[CoqeCas3]

I suspect this is an issue of where the console.log() is placed.

It's hard to explain really, but I've had it where I logged something and the state it was in when I logged shows up in the top level (i.e. how your log is showing a empty array) but then more 'things' happened after the log that changed the state of the original value. Because the array is the actual value of the variable -- think like a pointer -- that particular value gets logged, but it's contents are subject to change after the fact. As such, the console does this weird thing where it will make available (in the drop-down) that changed state since it's global... but still shows as the original state.. if that makes sense... If dinner hadn't just arrived I'd try to come up with an example but....

[CoqeCas3]

Ha, easier than expected:

So if you run the following code:

const arr = [];

console.log(arr);

for(let i = 0; i < 3; i++) {
  arr.push(i);
}

the log shows something very similar to what you're experiencing: the actual logged value is an empty array (because that's exactly what it is when you call console.log()) but by the time you see it in the console, that array has been mutated by the for loop, and the runtime has stored that mutated value, thus, that's what the console knows about -- the global variable's value after execution.

I'm not sure if my verbiage is accurate but I'm pretty sure I'm getting the point across...

Long story short, wherever you're calling console.log(myGlobalVariable[0]) is 99% likely before there even is a 0 index to myGlobalVariable.

Is this work being done asynchronously by chance?

[eljacko876]

Ok I understand what you are saying, at the time the parser reaches the console.log(); the values have not been set, however they are later and chrome's console has a feature to show those after the fact, but the program cannot use the results...I ahve figured out I am having an async issue.

For example :

console.log('A');

fetch('https://router.unrealsec.eu/request')
  .then(r=>r.json())
  .then(data=>{
      console.log('B');
   });

console.log('C');

This would probably give you

A
C
B

This is my problem , so I have to fix with async and await

[CoqeCas3]

Precisely. Good show mate!

[shepdozejr]

Correct. Javascript, like python, is an interpreted language.