Wsrtjtyk

I am trying to use the built in map() function on an Array.from () that returns some elements using Puppeteer.

The below is the code:

let res = await page.evaluate(elementPath => {

  return Array.from(document.querySelectorAll(elementPath), (cin, index) => {

    return {

      cs: `state is ${this.s}`, // returns state is undefined

      cinemaIndex: index,

      cinemaId: cin.getAttribute('data-id'),

      cinemaName: cin.getAttribute('data-name'),

      cinemaURL: cin.getAttribute('data-url'),

    };

  }, {

    s: 'NSW'

  });

}, `div[data-state=${cinemaState}] div.top-select-option a.eccheckbox`, cinemaState);

I am not able to assign cs with variable s or cinemaState.

Wondering if you have solution

[1,2,3,4].map(function(num, index,wholeArray){

    console.log(num,index,wholeArray,this.s);

},{s:"nsw"})

maps takes two argument callback and thisArg whatever u will pass at the second arg will be accessible bi this

You can assign s to the cinemaState property in your return statement using the following method:

cinemaState: this.s,

Additionally, Array.from() has a built-in map function, so you should call the map function from within Array.from() to avoid an intermediate array:

Array.from(arrayLike, mapFn);     // good

Array.from(arrayLike).map(mapFn); // bad

Lastly, you may want to use quotes around cinemaState in your attribute selector within your template literal selector string:

[data-state="${cinemaState}"] // good

[data-state=${cinemaState}]   // bad

Your final code should look something like this:

let res = await page.evaluate(elementPath => {

  return Array.from(document.querySelectorAll(elementPath), (cin, index) => {

    return {

      cinemaState: this.s,

      cinemaIndex: index,

      cinemaId: cin.getAttribute('data-id'),

      cinemaName: cin.getAttribute('data-name'),

      cinemaURL: cin.getAttribute('data-url'),

    };

  }, {

    s: 'NSW'

  });

}, `div[data-state=${cinemaState}] div.top-select-option a.eccheckbox`, cinemaState);

I am able to explain this. this is what has worked for me. I had to replace the arrow function to a traditional function

let res = await page.evaluate(elementPath => {

  return Array.from(document.querySelectorAll(elementPath), function (cin, index) // changed from (cin, index) => 

{

    return {

      cs: `state is ${this.s}`, // returns state is undefined

      cinemaIndex: index,

      cinemaId: cin.getAttribute('data-id'),

      cinemaName: cin.getAttribute('data-name'),

      cinemaURL: cin.getAttribute('data-url'),

    };

  }, {

    s: 'NSW'

  });

}, `div[data-state=${cinemaState}] div.top-select-option a.eccheckbox`, cinemaState);