javascript - 将 javascript 对象键与输入值进行比较

Question

我有一个存储到变量的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，一切正常，但如果我输入等于 France 的 c1 变量，则它不起作用。 任何提示/帮助如何管理它以使其工作。

谢谢。

Answer 1

因为 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>