<body>
  <main>
    <h1>L'interMEDIAire</h1>
    <h2>DropDown Dynamique</h2>
    <div class="website">
      
    </div>
  </main>
</body>
/*COULEURS*/
$noir:        rgba(0,0,0,1);
$noirfonce:   rgba(29,31,32,1);
$noiropaque:  rgba(29,31,32,.9);
$rose:        rgba(152,38,114,1);
$bleu:        rgba(128,155,189,1);
$blanc:       rgba(255,255,255,1);
$gris:        rgba(55,55,55,1);
$gris2:       rgba(255,255,255,.8);
$gris3:       rgba(204,204,204,1);
$padding:     20px 10px;

/*TOUS LES ELEMENTS*/
*,*:after,*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  margin: 0px auto;
  width: 640px;
  background: $noir;
  color: $blanc;
  font-size: 1em;
  padding: $padding;
}

main {
  padding: $padding;
  background: $noirfonce;
}

a {
  color: $bleu;
  text-decoration: none;
  transition: all .3s ease-in-out;
}

a:hover,a:active {
  color: $blanc
}

h1 {
  margin: 0;
  padding: 0;
  font-size: 1.4em;
  color: $bleu;
}

h2 {
  margin-top: 15px;
  width: 100%;
  color: $rose;
}

h3 {
  display: inline-block;
  margin: 10px 0px;
  color: $gris2;
  text-transform: uppercase;
}

h1,h2,h3 {
  font-family: 'Inconsolata', monospace;
}

.website {
  padding-top: 48px;
  text-align: center;
}

select {
  padding: 0px 4px;
  width: 111px;
  height: 55px;
}

/*www.lintermediaire.be*/
View Compiled 
$(document).ready(function() {
  const data = [
    {
      featured_media: 1019,
      categories: [
        34
      ],
      tags: [
        36
      ],
      apiAfcp: {
        id: 297,
        title: "Press medias",
        excerpt: "lorem arrtic Monkeys.",
        date: "octobre 19, 2021",
        category: [
          "Press"
        ],
        categorySlug: [
          "press"
        ],
        terms: [
          "Médias"
        ],
        termsSlug: [
          "medias"
        ],
      },
    },
    {
      featured_media: 1019,
      categories: [
        22
      ],
      tags: [
        36
      ],
      apiAfcp: {
        id: 1055,
        title: "General medias",
        excerpt: "Lorem Elsass ipsum dignissim vulputate aliquam wie DNA, eget id Strasbourg météor yeuh. munster leverwurscht ac geht&rsquo;s lacus barapli ch&rsquo;ai réchime Racing. rossbolla flammekueche Pellentesque amet, hopla rhoncus schpeck semper libero. Pfourtz ! hoplageiss Wurschtsalad sed lotto-owe gal libero, s&rsquo;guelt eleifend Morbi Gal. pellentesque morbi quam, varius nullam knepfle quam. commodo non gewurztraminer salu bredele [&hellip;]",
        date: "septembre 27, 2022",
        category: [
          "General"
        ],
        categorySlug: [
          "general"
        ],
        terms: [
          "Médias"
        ],
        termsSlug: [
          "medias"
        ],
      },
    },
    {
      featured_media: 1019,
      categories: [
        28
      ],
      tags: [
        35
      ],
      apiAfcp: {
        id: 1057,
        title: "Events News",
        excerpt: "Lorem Elsass ipsum dignissim vulputate aliquam wie DNA, eget id Strasbourg météor yeuh. munster leverwurscht ac geht&rsquo;s lacus barapli ch&rsquo;ai réchime Racing. rossbolla flammekueche Pellentesque amet, hopla rhoncus schpeck semper libero. Pfourtz ! hoplageiss Wurschtsalad sed lotto-owe gal libero, s&rsquo;guelt eleifend Morbi Gal. pellentesque morbi quam, varius nullam knepfle quam. commodo non gewurztraminer salu bredele [&hellip;]",
        date: "septembre 27, 2020",
        category: [
          "Events"
        ],
        categorySlug: [
          "events"
        ],
        terms: [
          "News"
        ],
        termsSlug: [
          "news"
        ],
      },
    },
    {
      featured_media: 1019,
      categories: [
        25
      ],
      tags: [
        35
      ],
      apiAfcp: {
        id: 2363,
        title: "Ant news",
        excerpt: "Lorem Elsass ipsum dignissim vulputate aliquam wie DNA, eget id Strasbourg météor yeuh. munster leverwurscht ac geht&rsquo;s lacus barapli ch&rsquo;ai réchime Racing. rossbolla flammekueche Pellentesque amet, hopla rhoncus schpeck semper libero. Pfourtz ! hoplageiss Wurschtsalad sed lotto-owe gal libero, s&rsquo;guelt eleifend Morbi Gal. pellentesque morbi quam, varius nullam knepfle quam. commodo non gewurztraminer salu bredele [&hellip;]",
        date: "octobre 07, 2022",
        category: [
          "Antarctic"
        ],
        categorySlug: [
          "antarctic"
        ],
        terms: [
          "News"
        ],
        termsSlug: [
          "news"
        ],
      },
    },
    {
      featured_media: 1019,
      categories: [
        28
      ],
      tags: [
        35
      ],
      apiAfcp: {
        id: 4256,
        title: "Press medias",
        excerpt: "lorem",
        date: "novembre 16, 2022",
        category: [
          "Events"
        ],
        categorySlug: [
          "events"
        ],
        terms: [
          "News"
        ],
        termsSlug: [
          "news"
        ],
      },
    },
  ]

  function runSelectYears(uniqueYears) {
    var select = "<select>"
    for (i in uniqueYears) {
      select += "<option>" + uniqueYears[i] + "</option>"
    }
    select += "</select>"
    return select
  }

  function runYear (date) {
    var date = new Date(date)
    return date.getFullYear()
  }

  function runYears(data) {
    var years = []
    $(data).each(function(index,value) {
      years.push(runYear(value.apiAfcp.date))
    })

    var uniqueYears = [...new Set(years)]
    uniqueYears.sort()
    var html = runSelectYears(uniqueYears)
    return html
  }

  $('.website').html(runYears(data))

})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js