Сравните ключ объекта javascript со значением ввода - PullRequest
Новая
       30

Сравните ключ объекта javascript со значением ввода

0 голосов
/ 05 сентября 2018

У меня есть объект js, который хранится в переменной 

var data = {
    "France":[
        {
            'population': "8M",
        }
    ],
    "Spain":[
        {
            'population': "18M",
        }
    ]
}

и у меня есть поле ввода, которое имеет какое-то значение (выбрано из выпадающего списка). 

<input type="text" id="country1" onkeyup="myFunction()" placeholder="Select indicator" value="France">

Я пытаюсь сравнить это значение ввода с ключом объекта, а затем, если это значение равно ключу, отобразить номер популяции. До сих пор я пытался сделать так 

$( ".compare button" ).click(function() {
        var c1 = $( ".first-country input" ).val(); //take value from input
        var zemlja = Object.keys(data); //take all keys from object
        var n = zemlja.includes(c1);   //check if value is included in object
        if (n) {
            $(".country1-result h1").html(data.c1[0].population);  //if value is included, add population number to result
        }  
    });

И я получил неопределённость. Я понимаю, что я не могу принять значение, если я поставлю переменную c1 вместо имени ключа. Если я введу имя ключа France, все будет работать нормально, но если я добавлю переменную c1, равную France, то она не будет работать. Любой намек / помощь, как справиться с этим, чтобы работать.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 05 сентября 2018 
$( ".compare button" ).click(function() {
        var c1 = $( ".first-country input" ).val(); //take value from input
        var result = data[c1] ? data[c1][0].population : '';
        $(".country1-result h1").html(result);
    });
0 голосов
/ 05 сентября 2018

Поскольку c1 является переменной, используйте скобочную запись, которая позволит вам использовать имя свойства в качестве переменной:

Изменение 

$(".country1-result h1").html(data.c1[0].population);

К 

$(".country1-result h1").html(data[c1][0].population);


var data = { "France": [{ 'population': "8M", }], "Spain": [{ 'population': "18M", }] }
function myFunction(){}

$(".compare").click(function() {
  var c1 = $(".first-country").val(); //take value from input
  var zemlja = Object.keys(data); //take all keys from object
  var n = zemlja.includes(c1); //check if value is included in object
  if (n) {
    $(".country1-result h1").html(data[c1][0].population); //if value is included, add population number to result
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="country1" onkeyup="myFunction()" placeholder="Select indicator" value="France" class="first-country">

<input type="button" class="compare" value="Click" />

<div class="country1-result">
  <h1></h1>
</div>
...