Changes to cope with separating HTML players and covers

asasass · December 6, 2021, 1:32pm

allWrappers.forEach gets changed to covers.forEach

Starting from here: https://jsfiddle.net/r0z746wh/

I don’t understand how to return the comparison from the function.

How it is supposed to be written.

return player.cover === cover;

  function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    covers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": allWrappers[index]
      });
    });
  }

  //callback syntax
  function getWrapper(cover) {
    function isCover(player) {
    player.cover === cover
    }

    const index = players.findIndex(isCover);
  }

Paul_Wilkins · December 6, 2021, 7:25pm

It’s close. The isCover function just need to return that comparison, and with covers.forEach, I was tired at the time so my apologies, but covers needs to be allCovers instead.

As testing, to check that things are right, when console.log the players array you should see the following:

0: {cover: button.playa.cover, wrapper: div.wrap}
1: {cover: button.playb.cover, wrapper: div.wrap}
2: {cover: button.playc.cover, wrapper: div.wrap}
3: {cover: button.playd.cover, wrapper: div.wrap}
4: {cover: button.playe.cover, wrapper: div.wrap}
5: {cover: button.playf.cover, wrapper: div.wrap}
6: {cover: button.playg.cover, wrapper: div.wrap}
7: {cover: button.playh.cover, wrapper: div.wrap}
8: {cover: button.playi.cover, wrapper: div.wrap}

and when you console.log the index, you should see a number.

asasass · December 6, 2021, 7:45pm

When you say.

console.log the players array
console.log the index

Do you mean written like this?

const players = [];console.log(players);

Where does this one go, is that how it is written.

console.log(index);

Like this?
"wrapper": allWrappers[index] console.log(index);

The console log testing above, how is it written?

This is what I did: https://jsfiddle.net/oLm6473n/

const manageUI = (function makeManageUI() {
  const body = document.body;

  const players = [];console.log(players);

  function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": allWrappers[index]
      });
    });
  }

  //callback syntax
  function getWrapper(cover) {
    function isCover(player) {

      return player.cover === cover;
    }

    const index = players.findIndex(isCover);
  }

Paul_Wilkins · December 6, 2021, 9:30pm

No I don’t. Just don’t use console.log - that causes even more problems for you that you don’t need.

asasass · December 6, 2021, 9:57pm

This is what I have: https://jsfiddle.net/yj846ua3/

I added: allCovers.forEach

Did I do the return correctly, or that still needs to be fixed?

That error is still there, but it’s been there this whole time.

Maybe that is later.

const manageUI = (function makeManageUI() {
  const body = document.body;

  const players = [];

  function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": allWrappers[index]
      });
    });
  }

  //callback syntax
  function getWrapper(cover) {
    function isCover(player) {
    return player.cover === cover;
    }

    const index = players.findIndex(isCover);
  }

Paul_Wilkins · December 7, 2021, 1:53am

Yes that look good. There’s just the return after the index variable to do now. The players array has an object at that index. That object has a wrapper property. We want to return the wrapper that is at the index of the players array.

asasass · December 7, 2021, 3:49am

return the wrapper

means? return wrapper;

Goes somewhere in here?

Am I looking at the wrong piece of code?

I tried placing return wrapper; at different spots in the code but none worked.

 const players = [];

  function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": allWrappers[index]
      });
    });
  }

Paul_Wilkins · December 7, 2021, 5:11am

It is the end of the getWrapper function that needs a bit more. I think that we are going to have to split things up a bit more for you to cope with it.

At the end of the getWrapper we need a wrapper variable to be defined, called wrapper. That wrapper is retrieved from the players object at the index location. The item at that index location is an object with both cover and wrapper properties. You need the wrapper property from that item.

Paul_Wilkins · December 7, 2021, 7:10am

To possibly explain a bit better, what the getWrapper function in big-picture terms does is to look through the list of players, searching for the cover. When we find the cover we return the matching wrapper.

You now have an index variable in your getWrapper function. That index is a number, which represents the location of the wrapper that we need.

You need to use that index to access an item in the players array. That item has a wrapper property that needs to be returned out of the getWrapper function.

asasass · December 7, 2021, 1:00pm

I did this:

At the end of the getWrapper we need a wrapper variable to be defined, called wrapper.

  function getWrapper(cover) {
    function isCover(player) {
    return player.cover === cover;
    }

    const index = players.findIndex(isCover);
  }
  
  const wrapper = {};

Found at this link: https://jsfiddle.net/cagzqknj/

Maybe I should stop here and wait because, what I do next, I seem to be doing wrong.

I’m getting confused in what I am to do next.

or, maybe I almost have it.

The item at that index location is an object with both cover and wrapper properties. You need the wrapper property from that item.

I am looking at this line:

const index = players.findIndex(isCover);

But I don’t see cover and wrapper.

I do see cover and wrapper here.

      players.push({
        "cover": cover,
        "wrapper": allWrappers[index]
      });
    });
  }

This is wrong. A return wrapper; doesn’t go there I don’t think.

   players.push({
        "cover": cover,
        "wrapper": allWrappers[index]   
      }); 
    }); 
  } 

  return wrapper;

  //callback syntax
  function getWrapper(cover) {
    function isCover(player) {
    return player.cover === cover;
    } 

    const index = players.findIndex(isCover);
  }  
   
  const wrapper = {};

I am stuck on this:

That wrapper is retrieved from the players object at the index location. The item at that index location is an object with both cover and wrapper properties. You need the wrapper property from that item.

Paul_Wilkins · December 7, 2021, 10:03pm

I mis-spoke earlier, for the players variable isn’t an object, it’s an array. I’m sorry for any confusion there.

There is a players variable which is an array, containing information about the covers and wrapper.

Lets start with the wrapper variable, and assign to it the players variable.
That gives you the whole array of items that is in the players variable.

We need less than the full array. Only one item from that array is wanted, so on the same line and after that players variable, use index in square brackets get an item from the array at that index.
That gives you an object with a cover property and a wrapper property.

We need less than the full object. We only want the wrapper property from that object, so after the square brackets add .wrapper

Then return that wrapper variable from the function.

asasass · December 7, 2021, 10:25pm

This:

      players.push({
        "cover": cover,
        "wrapper": allWrappers[index]
      });
    });
  }

Becomes this?

      players.push({
        "cover": cover,
        "wrapper": players[index].wrapper
      });
    });
  }

Was I supposed to do this instead?

"wrapper": allWrappers(players)[index].wrapper

Paul_Wilkins · December 7, 2021, 11:25pm

No, none of that.

Please reset back to the code at https://jsfiddle.net/cagzqknj/

Let’s take this one step at a time.
At the end of the getWrapper function, define a variable called wrapper.

asasass · December 7, 2021, 11:26pm

Aren’t there 4 kinds ?
const wrapper = {}; empty object global variable
const wrapper; defining a variable
const wrapper = []; empty array global variable
const wrapper = ""; empty string global variable

const wrapper; does not work in the code

It is either an object or an array global variable.

Of those, which am I using?

const wrapper = {};

const wrapper = [];

I went with the array: https://jsfiddle.net/4m3deybk/1/

function getWrapper(cover) {
    function isCover(player) {
      return player.cover === cover;
    }

    const index = players.findIndex(isCover);
  }
  
  const wrapper = [];

This gives me the error: index is not defined. https://jsfiddle.net/pysq63d8/

  const wrapper = players[index].wrapper;
  return wrapper;

Paul_Wilkins · December 8, 2021, 2:41am

I did say that it needs to be done at the end of the getWrapper function. That means still inside of the function at the end. Not after the function below it.

asasass · December 8, 2021, 3:06am

It is working now: https://jsfiddle.net/6uL7gac5/

Is the callback syntax done?

Are we now able to write it using the inline callback syntax?

This: findIndex(function(element) { ... })

const manageUI = (function makeManageUI() {
  const body = document.body;

  const players = [];

  function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": allWrappers[index]
      });
    });
  }

  //callback syntax
  function getWrapper(cover) {

    function isCover(player) {
      return player.cover === cover;
    }

    const index = players.findIndex(isCover);
    const wrapper = players[index].wrapper;
    return wrapper;
  }

Paul_Wilkins · December 8, 2021, 3:59am

Yes, the callback syntax is done.

With the inline callback, whre the const index line has isCover, remove that isCover and move the whole isCover function in there instead.

asasass · December 8, 2021, 4:06am

I did that here: https://jsfiddle.net/ucj3k52f/

Is that all there is?

// inline callback syntax
  function getWrapper(cover) {
    const index = players.findIndex(
      function isCover(player) {
        return player.cover === cover;
      }
    );
    const wrapper = players[index].wrapper;
    return wrapper;
  }

asasass · December 8, 2021, 5:43am

Continuing to make further progress, which syntax should I use?

Code 1

 //callback syntax
  function getWrapper(cover) {

    function isCover(player) {
      return player.cover === cover;
    }

    const index = players.findIndex(isCover);
    const wrapper = players[index].wrapper;
    return wrapper;
  }

Code 2

// inline callback syntax
  function getWrapper(cover) {
    const index = players.findIndex(
      function isCover(player) {
        return player.cover === cover;
      }
    );
    const wrapper = players[index].wrapper;
    return wrapper;
  }

Paul_Wilkins · December 8, 2021, 8:23am

Which one to use can different based on several different factors, such as function size and overall code complexity. Here, my preference is for neither of them. It’s to use arrow-notation instead when there’s only one line in the function.

// arrow function
  function getWrapper(cover) {
    function isCover = (player) => player.cover === cover;
    const index = players.findIndex(isCover);
    const wrapper = players[index].wrapper;
    return wrapper;
  }

I would also rename isCover to hasCover. It’s a small difference, but provides a more accurate understanding about things.

// arrow function, hasCover instead of isCover
  function getWrapper(cover) {
    const hasCover = (player) => player.cover === cover;
    const index = players.findIndex(hasCover);
    const wrapper = players[index].wrapper;
    return wrapper;
  }

[edited to correct an issue]

However, when the code is this simple, I would go with using an inline arrow function, so that the simplicity of the function tells you what is going on.

// inline arrow function
  function getWrapper(cover) {
    const index = players.findIndex(
        (player) => player.cover === cover
    );
    const wrapper = players[index].wrapper;
    return wrapper.
  }

Also, I would directly return the wrapper instead of assigning it to a wrapper variable.

// inline arrow function, direct return
  function getWrapper(cover) {
    const index = players.findIndex(
        (player) => player.cover === cover
    );
    return players[index].wrapper;
  }

That last one is what I would use.