jQuery Grouping Similar Items w/ Object Literal

Question

So I have this structure setup:

<ul>
    <li>http://www.youtube.com/watch?v=dw1Vh9Yzryo</li> (Vid1)
    <li>http://www.youtube.com/watch?v=bOF3o8B292U</li> (Vid2)
    <li>http://www.youtube.com/watch?v=yAY4vNJd7A8</li> (Vid3)
    <li>http://www.youtube.com/watch?v=yAY4vNJd7A8</li>
    <li>http://www.youtube.com/watch?v=dw1Vh9Yzryo</li>
    <li>http://www.youtube.com/watch?v=bOF3o8B292U</li>
    <li>http://www.youtube.com/watch?v=yAY4vNJd7A8</li>
    <li>http://www.youtube.com/watch?v=dw1Vh9Yzryo</li>
</ul>

Vid1 is repeated 3 times, Vid2 is repeated 3 times, and Vid3 is repeated 2 times. I want to put them into a structure where I can reference them like this:

youtube[0][repeated] = 3; youtube[0][download] = "http://www.youtube.com/get_video?video_id=dw1Vh9Yzryo&fmt=36"

youtube[1][repeated] = 3; youtube[1][download] = "http://www.youtube.com/get_video?video_id=bOF3o8B292U&fmt=36"

youtube[2][repeated] = 3; youtube[2][download] = "http://www.youtube.com/get_video?video_id=yAY4vNJd7A8&fmt=36"

"This video was repeated " + youtube[0][repeated] + " times and you can download it here: " + youtube[0][download];

How can I set this multidimensional array up? Been Googling for hours and I don't know how to set it up. Can anyone help me out?

score 3 · Answer 1 · edited May 23 '17 at 10:27

3

Take a look at JQuery: Remove duplicate elements?.

var seen = {};
$('li').each(function() {
    var txt = $(this).text();
    if (seen[txt])
        seen[txt] += 1;
    else
        seen[txt] = 1;
});

Now seen looks like

{ "http://www.youtube.com/watch?v=dw1Vh9Yzryo": 3,
  "http://www.youtube.com/watch?v=yAY4vNJd7A8": 2,
  [...]
}

You can then create a new list:

newlist = $('<ul />');
for (var vid in seen) {
    $("<li>This video was repeated " + seen[vid] + " times and you can download it here: " + vid + "</li>").appendTo(newlist);
}
newlist.appendTo(document.body); // or wherever you want it

You can see this working on http://jsfiddle.net/CqMcY/

edited May 23 '17 at 10:27

Community

1
1

answered Jun 15 '10 at 21:35

MvanGeest

9,536
4
41
41

Most of this was helpful but I'm still a bit confused on making the structure of it all. How could I get the `seen` variable to hold the count and the download link? – NessDan Jun 15 '10 at 22:00
Using the first of the three sections of code in my answer, which looks for `
` elements and builds `seen` based upon the contents he finds.

MvanGeest

Jun 15 '10 at 22:02

I built this for you on http://jsfiddle.net/CqMcY/ and you can see it working there. – MvanGeest Jun 15 '10 at 22:11

Okay so I found out what I'm trying to do for the structure is have a multidimensional array. That would allow me to have something like this: "Repeated " + youtube[0][repeated] + " times and download at " + youtube[0][download]; This way I have room to add more variables to the mix when the time calls for it. Problem is I don't know how to set that up. Any idea? – NessDan Jun 16 '10 at 01:10

Thanks for that but I'm still having difficulty. What I had shown up there about the YouTube thing isn't what I want but it's very similar. Not only do I have to add a counter for how many times something was repeated but I also need to add to the array a download link (the video links are not the download links) so overall I'm just really confused about the arrays. If you can help me with the multidimensional arrays that would be great help! I'm also confused about the seen variable having {} and the youtube having []. – NessDan Jun 16 '10 at 18:45

1

Some pointers here: http://www.herongyang.com/JavaScript/Object-Compare-Array-Object-Difference.html. If you feel your question wasn't answered, edit your question to include the new requirements. Or accept this answer :) and ask another question. – MvanGeest Jun 16 '10 at 18:51

Thanks, I'm going to get my thoughts together and try to re-word my question to make more sense. – NessDan Jun 16 '10 at 18:57

score 0 · Accepted Answer · answered Jun 16 '10 at 21:10

Okay, I've figured this out. The structure I needed was achieved by using an Object Literal

var youtube = {};

function makeDLLink(video)
{
    return "*Download Link*";
}

$('li').each(function() {
    var videoLink = $(this).text();
    var download = makeDLLink(videoLink);
    if (!youtube[videoLink])
    {
        youtube[videoLink] = { "repeated": 1, "download": download };
    }
    else
    {
        youtube[videoLink].repeated += 1;
    }
});

$('ul').append("<br /><br /><br />");
for (var key in youtube)
{
    var obj = youtube[key];
    $('ul').append(key + " was repeated " + obj.repeated + " times and can be DL'd from " + obj.download + "<br /><br />");
}

You can see it in action over at jsFiddle.

jQuery Grouping Similar Items w/ Object Literal

2 Answers2