Хотите перебрать массив json после выбора выпадающего списка

Question

Я хочу иметь возможность выбрать список опций из выпадающего списка со значениями «Station», взятыми из массива json - «smallData.json» (что я могу сделать, и он работает), а затем создать наборрезультатов из того же массива json, основанного на определенной опции "станции", выбранной из выпадающего списка (который в настоящее время не работает).Я предполагаю, что мне может понадобиться вызвать функцию и выполнить цикл по массиву с помощью метода onchange, однако я не уверен, как это будет работать.

[{"ID": 1, "Station": "Carmichael Rd. "," Address ":" 54 Myers Rd. "," Monthly_CStore_Sales ":" 120,000 "," Operator ":" Michael Sears "," Top_SKU ":" Hotdogs "}, {" ID ": 2,"Станция ":" Baillou Hill "," Адрес ":" 564 Jackson Ave. "," Monthly_CStore_Sales ":" 89000 "," Operator ":" Sarah Pikes "," Top_SKU ":" Patties "}, {" ID ":3, "Станция": "Oakesfield", "Адрес": "42 Peterson St.", "Monthly_CStore_Sales": "150000", "Operator": "Yolanda Grey", "Top_SKU": "Chicken"}]

<code> 

<select id="dmenu"></select>
<div id="optionT"></div>


<script>
let dropdown = document.getElementById('dmenu');
dropdown.length = 0;

let defaultOption = document.createElement('option');
defaultOption.text = 'Choose Station';

dropdown.add(defaultOption);
dropdown.selectedIndex = 0;

const url = './smallData.json';

const request = new XMLHttpRequest();
request.open('GET', url, true);

request.onload = function() {
  if (request.status === 200) {
    const data = JSON.parse(request.responseText);
    let option;
    for (let i = 0; i < data.length; i++) {
      option = document.createElement('option');
      option.text = data[i].Station;

      dropdown.add(option);

      var optionText = "";
      for (x in data){
          optionText += '<ul>' +

            '<li>Station: '+ data.Station[x] +'</li>' +

            document.getElementById('optionT').innerHTML = optionText;
      }

    } else {
    // Reached the server, but it returned an error

}
}
request.onerror = function() {
  console.error('An error occurred fetching the JSON from ' + url);
};

request.send();
</script>
</code>

Пример: если я выберу, например: «Station Carmichael Road», все пары значений ключа, связанные с этим полем «Station», которые я хочу найти:

«ID: 1», «Address":" 54 Myers Rd. "," Monthly_CStore_Sales ":" 120 000 "," Operator ":" Michael Sears "," Top_SKU ":" Hotdogs "

Answer 1

Вы хотите показать данные станции, когда выбрана выпадающая опция.

Добавить onchange событие в ваш выпадающий элемент.

<select id="dmenu" onchange="handleOnChange(this)"></select>

Затем переместите свой список-логика рендеринга в handleOnChange()

function handleOnChange(selectedDropdown) {
    // Find array element by "Station" value
    var station = data.find(function(element) {
        return element.Station == selectedDropdown.value;
    });

    // If station exists
    if (station) {
        // Show station's key-value in list
        let optionText = '<ul>';

        Object.keys(station).forEach(function(key) {
            optionText += '<li>' + key +': ' + station[key] +  '</li>';
            document.getElementById('optionT').innerHTML = optionText;
        });

        optionText += '</ul>';
    }
}

Полный код

<script>
function handleOnChange(selectedDropdown) {
    // Find array element by "Station" value
    var station = data.find(function(element) {
        return element.Station == selectedDropdown.value;
    });

    // If station exists
    if (station) {
        // Show station's key-value in list
        let optionText = '<ul>';

        Object.keys(station).forEach(function(key) {
            optionText += '<li>' + key +': ' + station[key] +  '</li>';
            document.getElementById('optionT').innerHTML = optionText;
        });

        optionText += '</ul>';
    }
}

let dropdown = document.getElementById('dmenu');
dropdown.length = 0;

let defaultOption = document.createElement('option');
defaultOption.text = 'Choose Station';

dropdown.add(defaultOption);
dropdown.selectedIndex = 0;

const url = './smallData.json';
let data;

const request = new XMLHttpRequest();
request.open('GET', url, true);

request.onload = function() {
    if (request.status === 200) {
        data = JSON.parse(request.responseText);
        let option;

        for (let i = 0; i < data.length; i++) {
            option = document.createElement('option');
            option.text = data[i].Station;

            dropdown.add(option);
        }
    }
    else {
        // Reached the server, but it returned an error
    }
}
request.onerror = function() {
console.error('An error occurred fetching the JSON from ' + url);
};

request.send();
</script>