Add image to Array.push element

Question

I am using select controls to cascade a filter selection going from league, team, to player. I was trying to add a player profile image to each player but I can't seem to add an img within an Array.push. Any thoughts on how to render an image next to the player's name with the select control? I have the cascading filter setup for numerous values so I'm trying to not have to create new logic for the cascading select controls and their array of values if possible.

My current code is:

    playerLists["MIN - Minnesotta Vikings"].push(["Player 1"]);         
    playerLists["ARI - Arizona Cardinals"].push(["Player 1"]);          
    playerLists["DAL - Dallas Cowboys"].push(["QB Tony Romo "]);    
    playerLists["DAL - Dallas Cowboys"].push(["RB Tyler Clutts"]); 
    playerLists["DAL - Dallas Cowboys"].push(["WR Cole Beasley"]);

...etc....

Thanks for any help you can give.

What are you trying to add that you can't add to the array? Post code of what you're trying to actually do. — matthewpavkov
– matthewpavkov, Commented Sep 24, 2014 at 18:01
Second that. I really don't understand a word of your story/question. I think you'd have to rephrase that bit. — vrijdenker
– vrijdenker, Commented Sep 24, 2014 at 18:02
Hi, I'm trying to have a dropdown box show the players name and their pic. I add the list of players by using the array.push approach but i can't figure out how to associate the player's pic to their name in the drop down box when it is rendered by the user. my code is already posted except for the failed attempts at assigning an img tag within the array such as: playerLists["teamA"].push(["firstname lastname", <img src="player1.gif" />]); The challenge is how do I display the image and the name together within the select control? — BlackBerry Special
– BlackBerry Special, Commented Sep 24, 2014 at 18:10

Sebastien · Accepted Answer · 2014-09-24 18:02:55Z

1

Why you just do not push the image url and use it like this :

playerLists["MIN - Minnesotta Vikings"].push({ name: "Player 1", url: "/path_to_image.png" });         
playerLists["ARI - Arizona Cardinals"].push({ name: "Player 2", url: "/path_to_image.png" });         
playerLists["DAL - Dallas Cowboys"].push({ name: "Player 3", url: "/path_to_image.png" });         
playerLists["DAL - Dallas Cowboys"].push({ name: "Player 4", url: "/path_to_image.png" });

After that, when you make an iteration you can do :

_.each(playerLists, function(player){
  console.log(player.name);
  console.log(player.url);
})

(To use _.each, you have to install http://underscorejs.org/)

answered Sep 24, 2014 at 18:02

Sebastien

6,65014 gold badges60 silver badges105 bronze badges

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

1 Comment

BlackBerry Special Over a year ago

Thanks. I ended up slightly modifying my design but your usage of the URL value in the Array got me to the next step and the ability to retreive the required image file.

Collectives™ on Stack Overflow

Add image to Array.push element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related