Compare javascript object key with value of input

Question

I have an js object that is stored to variable

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

and I have an input field that have some value (choosed from dropdown).

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

I am trying to compare that value of the input with key of the object, and then if that value is equal to the key, to display population number. So far I tried to do like this

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

And I got undefined. I figure it out that I can not take value if I put variable c1 instead of name of the key. If I put name of the key France, everything works fine, but if I put c1 variable that is equal to France, then it is not working. Any hint/help how to manage this to work.

Thanks.

It would be nice if you can create a runnable snippet of your code. Faster to debug — Vikasdeep Singh
– Vikasdeep Singh, Commented Sep 5, 2018 at 13:40
You do not need this: var zemlja = Object.keys(data);. Instead you can just try .html(!!data[c1] && data[c1][0].population || '') — Rajesh Dixit
– Rajesh Dixit, Commented Sep 5, 2018 at 13:56

Rajesh Dixit · Accepted Answer · 2018-09-05 14:00:18Z

1

Since c1 is a variable, use bracket notation which will allow you to use property name as variable:

Change

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

To

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

edited Sep 5, 2018 at 14:00

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

answered Sep 5, 2018 at 13:40

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Marko Petković Over a year ago

Still not working, I got message Cannot read property of undefined.

Chiptus Over a year ago

you need to check if data[c1] exists. see Artem's answer

Mamun Over a year ago

@MarkoPetković, I have updated the answer by adding some HTML and updating few selectors......please check.

Marko Petković Over a year ago

It is working. I checked if data exists. Thanks to all.

Rajesh Dixit Over a year ago

@Mamun I have updated your code and added myFunction as it was throwing error. Yes, its a part of OP's code, but users will face this issue so added it. Please revert if the edit is not required.

Artem Arkhipov · Accepted Answer · 2018-09-05 13:44:07Z

0

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

answered Sep 5, 2018 at 13:44

Artem Arkhipov

7,5256 gold badges34 silver badges56 bronze badges

Collectives™ on Stack Overflow

Compare javascript object key with value of input

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related