Как вернуть позицию значения в объекте javascript, используя список данных - PullRequest
Новая
       9

Как вернуть позицию значения в объекте javascript, используя список данных

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

После выбора опции из datalist, я ожидаю, что этот код javascript вернет местоположение option в javascript object.

Без использования datalist код работает как положено.

Почему это не работает?

Может ли Javascript отвечать на новые входные данные datalist без какой-либо перезагрузки страницы? Я надеюсь, что это не требует PHP. 

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

function result() {
  document.getElementById("location").innerHTML = input.value;
}

myObj = {
  "type":"A",
  "info": [
    { "item":"1", "properties":{ "id":"AL", "height": "25", width: "50" } },
    { "item":"2", "properties":{ "id":"PO", "height": "30", width: "40" } },
    { "item":"3", "properties":{ "id":"RA", "height": "20", width: "100" } }
  ]
}

myObj.info.forEach(function(e, z) {
  var q = document.getElementById("location").innerHTML;
  if (e.properties.id == q) {
    document.getElementById("position").innerHTML = z;
    document.getElementById("width").innerHTML = myObj.info[z].properties.width;
  }

});
<input list="myInput" id="myInputId" value="">
<button id="myButton" onClick="result()">submit</button>

<datalist id="myInput">
<option>AL</option>
<option>PO</option>
<option>RA</option>
</datalist>

<p>Result:<span id="location"></span></p>
<p>Position in object:<span id="position"></span></p>
<p>Width:<span id="width"></span></p>

Ответы [ 2 ]

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

вы можете использовать .find () для поиска выбранного элемента, а затем присвоить значения правым html элементам: 

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

function result() {
  
  var res = myObj.info.find(({properties}) =>
     properties.id === myInputId.value
  );
  
  /*
  // you can also use .forEach()
  
  var res;
  myObj.info.forEach(e => {
    if(e.properties.id === myInputId.value)
      res = e;
  });
  */
  
  if(res){
    document.getElementById("location").innerHTML = res.properties.id;
    document.getElementById("width").innerHTML = res.properties.width;
    document.getElementById("position").innerHTML = res.item;
  }
}

myObj = {
  "type":"A",
  "info": [
    { "item":"1", "properties":{ "id":"AL", "height": "25", width: "50" } },
    { "item":"2", "properties":{ "id":"PO", "height": "30", width: "40" } },
    { "item":"3", "properties":{ "id":"RA", "height": "20", width: "100" } }
  ]
}

/*
myObj.info.forEach(function(e, z) {
var q = document.getElementById("location").innerHTML;
  if (e.properties.id == q) {
    document.getElementById("position").innerHTML = z;
    document.getElementById("width").innerHTML = myObj.info[z].properties.width;
  }
  
});
*/
<input list="myInput" id="myInputId" value="">
<button id="myButton" onClick="result()">submit</button>

<datalist id="myInput">
<option>AL</option>
<option>PO</option>
<option>RA</option>
</datalist>

<p>Result:<span id="location"></span></p>
<p>Position in object:<span id="position"></span></p>
<p>Width:<span id="width"></span></p>
0 голосов
/ 05 июля 2018

хорошо, просто посмотрев на этот код: в результирующей функции myInputId не является переменной, похоже, что вместо этого она должна быть input.value, или измените имя входной переменной на myInputId, и посмотрите, есть ли у вас другие проблемы .

EDIT

Хорошо, ваша проблема в том, что вы не обновляете позицию и т. Д.

Почему бы вам просто не поместить этот цикл forEach в функцию результата, как сейчас, кажется, нет причины, по которой он должен обновить.

...