jQuery .data(), need to accept array elements as key or find alternative (JSON?)

Question

Thanks for checking out my post. I am building a jQuery-based selector for Youtube videos and would like to streamline the process as much as possible as I have many to upload. I would like to keep the code DRY and not repeat the Youtube IDs in my data().

In the HTML file I include the Youtube iframe creation script and each video's description in an individual span which I iterate over with eq() and assign to an array. I've been attempting to iterate over the Youtube ID numbers, place them into an array, and then use these array elements in .data() but only the key will only accept strings. I've attempted wrapping the array objects. I would attempt a JSON maneuver, but I'm not sure if that will be the most elegant solution.

What can I do to minimize the ugly .data() or make use of the ytKey value I originally receive from the function?

//YT DESCriptor
$("#videoSelection").change(function() {
  ytKey = $(this).val();

  var clip = []
  for( var i = 0; i < 12; i++) {
    clip[i] = $('.xfactor span').eq(i).html();
  }

  var keys = []
  for( var i = 0; i < 12; i++) {
    keys[i] = $('#videoSelection option').eq(i).text();
  }

      $("body").data({
        "i_uWYLyDFTo" : clip[0],
        "EoVfXX1vjaY" : clip[1],
        "vBx4WRsSvMU" : clip[2],
        "XaWvQGC8zYU" : clip[3],
        "EAR2zKEASfw" : clip[4],
        "WYFgJd0w5-4" : clip[5],
        "Td9TuR86BOE" : clip[6],
        "g3yrh50fJnE" : clip[7],
        "eRepVIXl9ps" : clip[8],
        "CMfxvrf0DG4" : clip[9],
        "SGcJftL3HZc" : clip[10],
        "UwH6jrgRI4Y" : clip[11]
    });

  $("#open").empty();
  description = ( $("body").data(ytKey) );
  $("#open").append(description);
});

Here is my selector markup, which the youtube API makes selectable:

<div id="videoDiv">Loading...</div>
  <div id="videoControls" class="desc">
    <p>Select a video to load:</p>
    <select id="videoSelection" onchange="loadVideo();">
      <option value="i_uWYLyDFTo" selected>No One Wants You</option>
      <option value="EoVfXX1vjaY">Hello Robot</option>
      <option value="vBx4WRsSvMU">Raymore & Hannaghan</option>
      <option value="XaWvQGC8zYU">The Return of Blood House Part II</option>
      <option value="EAR2zKEASfw">'batin'</option>
      <option value="WYFgJd0w5-4">Activities in Daily Living with Jimmy Callahan: Episode 1</option>
      <option value="Td9TuR86BOE">Two Shot Shorts: The Movie</option>
      <option value="g3yrh50fJnE">The Stand-off</option>
      <option value="eRepVIXl9ps">Psych-Hick</option>
      <option value="CMfxvrf0DG4">Hand Pop Body Swap</option>
      <option value="SGcJftL3HZc">Fat Camp</option>
      <option value="UwH6jrgRI4Y">The Hurting</option>
    </select>
  </div>

Ideally, I would like the .data() to look (in an expanded way) like this, but I'm not sure if this is simply impossible due to jQuery's API:

    $("body").data({
        keys[0] : clip[0],
        keys[1] : clip[1],
        keys[2] : clip[2],
        keys[3] : clip[3],
        keys[4] : clip[4],
        keys[5] : clip[5],
        keys[6] : clip[6],
        keys[7] : clip[7],
        keys[8] : clip[8],
        keys[9] : clip[9],
        keys[10] : clip[10],
        keys[11] : clip[11]
    });

An example of the spans (descriptions):

<div class="xfactor">
    <span>
    Drunk-Noir (Our 1st Attempt)<br><br>
    Directed by John Keefer<br>
    Written by Dan D'Aprile, Chris Johnson, Dan Metzker, Sean Michael, John Keefer, Matt Poooooooooo-Ah, and Christine Wood<br>Edited by Chris Johnson<br><br>
    (Originally Aired 5/13/07)
    </span>

    <span>
    A man & his robot.<br><br>
    Written & Directed by John Keefer<br>
    Starring Dan Metzker<br>
    Edited by Chris Johnson<br>
    Music by Dan Metzker<br><br>
    (Originally Aired 5/22/07)
    </span>
</div>

why are you storing the different youtube ID's in body? shouldn't you do that on the actual button/thumbnail/etc. you have for each video? — kennypu
– kennypu, Commented Mar 14, 2013 at 0:39
I've added my selection markup for clarification, I'm actually detecting the YT ID in an option set to dynamically change the video that is currently playing. — Jason Sears
– Jason Sears, Commented Mar 14, 2013 at 0:59
is there a reason why you're putting it into .data()? the way you're doing it, you can just create an array with the key/clip combinations, and not mess with .data() at all — kennypu
– kennypu, Commented Mar 14, 2013 at 1:21
To be honest, I'm only using .data() because it gave me initial functionality. I would be extremely appreciative to see your take on an array. I'm currently attempting a fix, but still haven't had much luck. Thanks! — Jason Sears
– Jason Sears, Commented Mar 14, 2013 at 2:00

Alex.Bullard · Accepted Answer · 2013-03-14 01:23:34Z

2

You could do it this way:

d = {}
$.each(keys, function(index, key) {
  d[key] = clips[index]
})
$('body').data(d)

answered Mar 14, 2013 at 1:23

Alex.Bullard

5,5632 gold badges27 silver badges33 bronze badges

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

1 Comment

Jason Sears Over a year ago

I gave it a shot, but I'm returning undefined descriptions as is.

kennypu · Accepted Answer · 2013-03-14 03:48:56Z

1

assuming that the descriptions(the spans), and your video selection (the select) will always be in the same order, and have the same number of elements, you can just set an array or object that stores the information via the videoID:

//set descriptions
var videoDescriptions = {};
$(".xfactor span").each(function(index) {
  videoDescriptions[$('#videoSelection option').eq(index).text()] = $(this).html();
});

then for the onchange event:

$("#videoSelection").change(function() {
  //append the video description using the list we made.
  $("#open").empty().append(videoDescriptions[$(this).val()]);
});

edited Mar 14, 2013 at 3:48

answered Mar 14, 2013 at 2:08

kennypu

6,1332 gold badges24 silver badges29 bronze badges

5 Comments

Jason Sears Over a year ago

Thanks for your patience and help. When I alert videoDescriptions in the console, I'm returning empty/undefined values. Any thoughts on why this could be happening?

Jason Sears Over a year ago

I've added span examples for reference. Thanks again.

Jason Sears Over a year ago

On console, I'm also pulling left-hand invalid assignment for the .each function.

Jason Sears Over a year ago

I just commented out my script and replaced it with yours as is. It's located in an external .js file.

kennypu Over a year ago

@JasonAndrew fixed it, the only change I made was videoDescription should be an object, not set as an array

Collectives™ on Stack Overflow

jQuery .data(), need to accept array elements as key or find alternative (JSON?)

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related