Storing element text in an array and accessing it later - cypress

Question

I am trying to get element text inside a for loop for multiple elements and wanted to store it in an array in order to use it later. below is the code I am using. I needed to access the array for the later use so that i compare this array with another array. Please let me know how to achieve this in cypress.
it('My test', () => {
let arrayOfElementText = [];
cy.get('#divEl').each(($el) => {
cy.wrap($el).click();
cy.get('#input').invoke('val')
.then(val => {
arrayOfElementText.push(val);
console.log(arrayOfElementText);//Able to access
});
console.log(arrayOfElementText); **//Not able to access**
})
let anotherArray = [];
cy.get('#divEl1').each(($el) => {
cy.get('#input1').invoke('val')
.then(val => {
anotherArray.push(val);
console.log(anotherArray);//Able to access
});
console.log(anotherArray);**//Not able to access**
})
// code to compare two arrays
//both arrays are not accessible here
});

Answer 1

You need to use .then() to access the values, as they are derived from asynchronous commands.
let arrayOfElementText = [];
cy.get('#divEl').each(($el) => {
cy.wrap($el).click();
cy.get('#input').invoke('val')
.then(val => {
arrayOfElementText.push(val);
})
.then(() => {
console.log(arrayOfElementText); // array is available at every step of .each()
})
}).then(() => {
console.log(arrayOfElementText); // full array is available here
cy.wrap(arrayOfElementText).as('myArray1') // alias it for later
})
/*
Next array, same as above
*/
cy.get('#myArray1').then(myArray1 => {
cy.get('#myArray2').then(myArray2 => {
// compare
})
})
Note cy.get('#input') will always get the same input