[JS] dubbele waarde's 1 keer weergeven

[kleautviool]

Misschien een beetje vreemde omschrijving, maar ik zal mijn best doen om mijn probleem uit te leggen.

Ik heb dus een lijst (<ul>) met daarin allemaal namen van artiesten en titels van nummers.
Nu kunnen er dus meerdere nummers van 1 artiest onder elkaar staan.
Mijn bedoeling is nu om d.m.v. javascript alle artiestennamen in een dropdownlijst te plaatsen, alleen wil ik iedere artiest maar 1 keer in de dropdown hebben.
Dus stel ik heb de volgende lijst:

HTML:

<ul id="musicList">
    <li>213 - Groupie Luv</li>
    <li>2Pac - 2 of Amerikaz Most Wanted</li>
    <li>2Pac - Dear Mama</li>
    <li>2Pac - Fuck Dre (Dr Dre Diss)</li>
    <li>2Pac - Hail Mary</li>
    <li>2Pac - I Ain't Mad At Cha</li>
    <li>Beanie Sigel - The Empire Strikes Back (Jadakiss Diss)</li>
    <li>Big L - '98 Freestyle</li>
    <li>Big L - Back 2 Back (feat Jay-Z)</li>
    <li>Big L - C.O.C. Style (1:53)</li>
</ul>

En nu wil ik dus het volgende dropdown-menu krijgen:

HTML:

<select size="1">
    <option value="213">213</option>
    <option value="2Pac">2Pac</option>
    <option value="Beanie Sigel">Beanie Sigel</option>
    <option value="Big L">Big L</option>
</option>

Nu heb ik momenteel de volgende manier om de artiesten en de titels te scheiden, maar als ik nu alle artiesten als option zet krijg ik 1 x 213, 5 x 2Pac, 1 x Beanie Sigel en 3 x Big L

JavaScript:

    var handleListClick = function()
        {
            var li = document.getElementsByTagName("li"), t, str;
            for(i=0;i<li.length;i++)
                {
                    t = li[i].firstChild.nodeValue;
                    str = t.split(" - ");
                    // str[0] heeft nu de artiest, maar hoe ga ik deze 1 keer in de dropdown lijst krijgen?
                    }
                }

De lijst met artiesten wordt niet uit een MySQL database opgehaald, dus een SELECT DISTINCT() gaat niet werken, maar ik zoek wel hetzelfde principe..

Wie kan mij helpen?

[SuperRembo]

Je zal voordat je een nieuw element aan je lijst toevoegt, moeten kijken of dat element niet al voorkomt in de lijst.

code:

lijst = nieuweLijst();
for (...) {
   if (!lijstBevatElement(lijst, element)) {
      voegElementToeAaanLijst(lijst, element);
   }
}

[Borizz]

Het makkelijkste is inderdaad om bij het toevoegen van de artiesten te checken of ze al voorkomen in de lijst. Naderhand de lijst doorlopen om duplicaten te verwijderen kan ook maar is niet zo efficient. Ik zou er een functie van maken 'addToList' of zoiets die ervoor zorgt dat er geen duplicaten in voorkomen.

[ Voor 3% gewijzigd door Borizz op 20-09-2005 22:49 ]

[kleautviool]

Ok, maar nieuwe nummers worden handmatig toegevoegd. Hier komt geen JS of PHP aan te pas. En ik kan wel alle artiesten (het gaat om zo'n 476 nummers, zeg 120 verschillende artiesten) handmatig aan een array toe voegen, maar dan kan ik net zo goed die dropdown-lijst zelf samenstellen.

Vandaar dat ik al via JS alle waarde's in een var heb (str[0]), dus hier zou ik verder mee willen werken.

Een andere manier waar ik aan zat te denken was een soort array_push() alleen dan in javascript. Alleen het probleem hierbij is dat ik geen idee heb hoe zo'n javascript functie te schrijven (Ben niet zo'n held met JS)

[Borizz]

Vanuit die str[0] kan je verder. Je hoeft ze niet in een array te plaatsen, je kunt ze gelijk aan de selectBox toevoegen, bijvoorbeeld met de volgende functie:

JavaScript:

var selectBox = document.getElementById(selectBox);
function addToList(option) {
  // Zelf nog een check schrijven die nagaat of de optie al voorkomt in de lijst
  if (option in de lijst) { return (false); }
  
  selectBox.options[selectBox.length] = new Option(option, option);
  return (true);

}

Met de volgende code kun je dan een optie toevoegen aan de lijst.

JavaScript:

addToList(str[0]);

[Verwijderd]

De makkelijkste check die je kunt verzinnen voor dit soort situaties, is het Array sorteren en bij elk item controleren of het gelijk is aan het vorige item.

Uit de losse pols:

JavaScript:

var li = document.getElementsByTagName("li"), t, str;
li = li.sort(sortLI);
for(i=0;i<li.length;i++) {
  t = li[i].firstChild.nodeValue;
  str = t.split(" - ");
  if(i && t != li[i-1].firstChild.nodeValue) {
    // doe hier je ding...
  }
}

function sortLI(a, b) {
  return a.firstChild.nodeValue < b.firstChild.nodeValue;
}

[ Voor 12% gewijzigd door Verwijderd op 20-09-2005 23:28 ]

[crisp]

HTML:

<ul id="musicList">
    <li>213 - Groupie Luv</li>
    <li>2Pac - 2 of Amerikaz Most Wanted</li>
    <li>2Pac - Dear Mama</li>
    <li>2Pac - Fuck Dre (Dr Dre Diss)</li>
    <li>2Pac - Hail Mary</li>
    <li>2Pac - I Ain't Mad At Cha</li>
    <li>Beanie Sigel - The Empire Strikes Back (Jadakiss Diss)</li>
    <li>Big L - '98 Freestyle</li>
    <li>Big L - Back 2 Back (feat Jay-Z)</li>
    <li>Big L - C.O.C. Style (1:53)</li>
</ul>
<select id="artistSelect"></select><br>
<input type="button" value="fill select" onclick="fillSelect()">
<script type="text/javascript">

function fillSelect()
{
    var ul = document.getElementById('musicList'), li = ul.getElementsByTagName('li');
    var select = document.getElementById('artistSelect');
    select.options.length = 0;
    var artist, prevartist = '';
    for (var i = 0, j = li.length; i < j; i++)
    {
        artist = li[i].firstChild.nodeValue.split(' - ')[0];
        if (artist != prevartist)
        {
            select.options[select.options.length] = new Option(artist, artist);
            prevartist = artist;
        }
    }
}

</script>