Как использовать indexOf с параметрами списка данных - PullRequest
Новая
       9

Как использовать indexOf с параметрами списка данных

0 голосов
/ 05 июля 2018

Когда stateName (т. Е. Вермонт) выбрано из datalist, я хочу отобразить сокращенное название штата abbrName (т. Е. VT) из datalist option id= в результатах.

Мой текущий код ищет в datalist options значение индекса, полученное из object, но проблема в том, что datalist и object не сортируются одинаково, поэтому значение индекса z дает неправильный результат.

Должен ли я искать datalist с IndexOf? Как мне найти индексную позицию datalist? 

var n = document.getElementById("myInputId");
n.addEventListener("keyup", function(event) {
  event.preventDefault();
  if (event.keyCode === 13) {
    document.getElementById("myButton").click();
  }
});

function result() {
  var a = n.value;
  document.getElementById("stateName").innerHTML = a;
  myObj.info.forEach(function(e, z) {
    var q = document.getElementById("stateName").innerHTML;
    if (e.properties.id == q) {
      document.getElementById("statePosition").innerHTML = z;
      document.getElementById("statePopulation").innerHTML = myObj.info[z].properties.population;
      document.getElementById("abbrName").innerHTML = document.getElementById('myInput').getElementsByTagName('option')[z].getAttribute('id');
    }
  });
}

myObj = {
  "type": "A",
  "info": [{
      "item": "1",
      "properties": {
        "id": "Vermont",
        "population": "620,000"
      }
    },
    {
      "item": "2",
      "properties": {
        "id": "Alabama",
        "population": "4,780,000"
      }
    },
    {
      "item": "3",
      "properties": {
        "id": "California",
        "population": "39,540,000"
      }
    }
  ]
}
<input list="myInput" id="myInputId" value="" option="">
<button id="myButton" onClick="result()">submit</button>

<datalist id="myInput">
  <option id="AL">Alabama</option>
  <option id="CA">California</option>
  <option id="VT">Vermont</option>
</datalist>

<p>Object index position: <span id="statePosition"></span></p>
<p>Object result (state name): <span id="stateName"></span></p>
<p>Object result (population): <span id="statePopulation"></span></p>
<p>Datalist index position (state abbreviation position): <span id="abbrPosition"></span></p>
<p>Datalist "option id" (state abbreviation name): <span id="abbrName"></span></p>

1 Ответ

0 голосов
/ 05 июля 2018

Конечно, это дает неправильный результат.

Вы можете изменить порядок опций и массива с одинаковыми значениями на один и тот же индекс.

Или вы можете найти значение в списке данных и взять id как abbrName. 

function result() {
    var a = n.value;
    document.getElementById("stateName").innerHTML = a;
    myObj.info.forEach(function (e, z) {
        var q = document.getElementById("stateName").innerHTML;
        if (e.properties.id == q) {
            document.getElementById("statePosition").innerHTML = z;
            document.getElementById("statePopulation").innerHTML = myObj.info[z].properties.population;
        }
    });
    document.getElementById("abbrName").innerHTML = [].find.call(document.getElementById('myInput').getElementsByTagName('option'), ({ value }) => value === a).id;
}

Использует массив как объект 

document.getElementById('myInput').getElementsByTagName('option')

заимствует Array#find из массива и принимает указанный выше массив как объект в качестве this объектов вместе с Function#call.

Как find Обратный вызов 

({ value }) => value === a

a происходит деструктурирующее присваивание , где берется только одно свойство итерируемого объекта, а затем сравнивается с заданным значением.

Если сравнение возвращает true, объект найден и возвращен из find. Тогда требуется id собственность.

...