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

【问题标题】：Compare javascript object key with value of input将javascript对象键与输入值进行比较
【发布时间】：2018-09-05 13:38:39
【问题描述】：

我有一个存储到变量中的 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 而不是键名，我就不能取值。如果我输入关键法国的名称，一切正常，但如果我输入等于法国的 c1 变量，则它不起作用。任何提示/帮助如何管理它的工作。

谢谢。

【问题讨论】：

如果您可以为您的代码创建一个可运行的 sn-p，那就太好了。调试速度更快
你不需要这个：var zemlja = Object.keys(data);。相反，您可以尝试.html(!!data[c1] && data[c1][0].population || '')

标签： javascript arrays json javascript-objects

【解决方案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>

【讨论】：

仍然无法正常工作，我收到消息无法读取未定义的属性。
你需要检查data[c1]是否存在。见 Artem 的回答
@MarkoPetković，我已经通过添加一些 HTML 和更新一些选择器来更新答案......请检查。
它正在工作。我检查了数据是否存在。谢谢大家。
@Mamun 我已经更新了你的代码并添加了myFunction，因为它抛出了错误。是的，它是 OP 代码的一部分，但用户会面临这个问题，所以添加了它。如果不需要编辑，请恢复。

【解决方案2】：

$( ".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);
    });

【讨论】：