JQUERY iterate with array

Question

I need some help for my website. I'm trying to iterate with an array and two different input field. my html file contains like below:

<input name="comune" type="text" id="comune" list="comuni" />
<datalist id="comuni">
</datalist>
<input name="provincia" type="text" id="provincia" />

Let's say that my array is like this:


    var comProv = {
    'Pisa' : 'PI',
    'Firenze' = 'FI',
    'Roma' = 'RM'}

I would like to populate the datalist with the Key of the array and, on selection of specific option, I would like to show in the second input field the value of the same array?s item.

I tried with this code


    $('#comune').keyup(function(){
        var options = '';
        for(var i = 0; i < comProv.length; i++){
            options += '<option value="'+comProv[i]+'" />';
        }
        document.getElementById('comuni').innerHTML = options;
    });

I stopped without moving to the second topic cause I'm stack. Anyone can help? Thank you in advance.

I'm totally new in programming (I'm not a programmer but a lawyer) that's why for me is not so easy — S. Iandolo
– S. Iandolo, Commented Apr 9, 2020 at 19:42

Barmar · Accepted Answer · 2020-04-09 19:42:48Z

1

It's an object, not an array. You can iterate it using $.each().

$('#comune').keyup(function(){
    var options = '';
    $.each(comProv, function(key, value) {
        options += `<option value="${value}">${key}</option>`;
    });
    $('#comuni').html(options);
});

answered Apr 9, 2020 at 19:42

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

1 Comment

S. Iandolo Over a year ago

Thank to you also very much

Elman Huseynov · Accepted Answer · 2020-04-09 19:46:03Z

0

First of all, it is not an array, it is an object. Second, you need to use "for...in" loop to loop object or $.each if you are using jQuery library. Last but not least, you have typo error in your object. Finally, try this code that is in this snippet:

$(function(){

    var comProv = {
        'Pisa' : 'PI',
        'Firenze':'FI',
        'Roma': 'RM'
    }

    $('#comune').keyup(function(){
        var options = '';
        $.each(comProv, function(key, value) {
            options += `<option value="${value}">${key}</option>`;
        });
        $('#comuni').html(options);
    });


})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="comune" type="text" id="comune" list="comuni" />
<datalist id="comuni">
</datalist>
<input name="provincia" type="text" id="provincia" />

answered Apr 9, 2020 at 19:46

Elman Huseynov

1,1471 gold badge8 silver badges18 bronze badges

10 Comments

S. Iandolo Over a year ago

Thank you very much. About the second question...I need to put the key in the on keyup in the first input and the value in the second input field. Is it possible? then I will disappear :)

Elman Huseynov Over a year ago

so in first input it should be Pisa for example and in the second Input P1?

Elman Huseynov Over a year ago

but what if they will again put the cursor on the second input?))) you value will change then, it is no good

S. Iandolo Over a year ago

I'm evaluating or to substitute with a label or anyway I want to make the second input "readonly"

Elman Huseynov Over a year ago

use $('#inputId').prop('readonly', true); to make it readonly)

|

Collectives™ on Stack Overflow

JQUERY iterate with array

2 Answers 2

1 Comment

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related