How to dyncamically set the value of a dropdownlist from an array

Question

I am trying to get a value from a dropdown list. I have the dropdown list and I have the value that I want but I don't know how to link them to each other. So the value of the category should go in the dropdown list and then the image value from that string should be the outcome.

This is the JSON file array called ill.json

...
[{"id":"7","category":"Lente collectie 2021","image":"Teddy_bears_10.png"},{"id":"11","category":"Lente collectie 2021","image":"Individual_floral_elements_01.png"}
...

The category value goes into the dropdown list and then the outcome should be the image value: This is my dropdown...

const req = new XMLHttpRequest();
req.open('GET', 'ill.json', true);
req.send();
req.onload = function() {
  const json = JSON.parse(req.responseText);
  let dropdown = "";
  let html = "";
  //FILLING DROPDOWN WITH CATEGORYs
  var result = json.reduce(function (r, a) {
        r[a.category] = r[a.category] || [];
        r[a.category].push(a);
        return r;
    }, Object.create(null));
    let keys = Object.keys(result)
    keys.forEach((key) => {
    dropdown += "<select id='select'>"
    dropdown += "<option value='" + key + "'>"
    dropdown += key
    dropdown += "</option>"
    dropdown += "</select"
  })
  document.getElementsByClassName('dropdown')[0].innerHTML = dropdown;

...

And this is how I got the images...

//get all images
  json.forEach(function(val) {
      html += "<div class='illustratie-item'>";
      html += "<img class='dt-filelist-image' src='" + val.image + "'/>"

    html += "</div><br>";
});
document.getElementsByClassName('illustratie-wrapper')[0].innerHTML = html;
...

Answer 1

If I get that right, it should be as easy as this:

var categorySelect = document.querySelector('.dropdown');
categorySelect.addEventListener('change', function(evt) {
    var item = json.find(function(item) {
        return item.id === evt.target.value;
    });

    console.log(item.image); // there's your image
});

Answer 2

Check the below snippet.

 var images = [{"id":"7","category":"Lente collectie 2020","image":"Teddy_bears_10.png"},{"id":"11","category":"Lente collectie 2021","image":"Individual_floral_elements_01.png"}]; var dropdown = ''; dropdown += '<select id="select">'; Object.keys(images).forEach(function(key) { dropdown += '<option value="' + images[key].id + '">'; dropdown += images[key].category; dropdown += '</option>'; }); dropdown += '</select>'; document.getElementsByClassName('dropdown')[0].innerHTML = dropdown; var categorySelect = document.querySelector('#select'); categorySelect.addEventListener('change', function(evt) { var item = images.find(function(item) { return item.id === evt.target.value; }); console.log( item.image ); });

 <div class="dropdown"></div>