JS - Récupère la valeur de l'objet correspondant

Question

Dans mon javascript j'ai un objet:

var spirits = [ 
    { name: 'Bourbon (80 proof)', ethanol: 40, sugar: 0, acid: 0 }, 
    ... 
    { name: 'Rum (100 proof)', ethanol: 50, sugar: 0, acid: 0 } 
] 

Dans mon html, il y a un <select> avec toutes les valeurs étant la chaîne avec le nom de la boisson (c.-à-Bourbon (80 proof) '). J'ai déjà cette valeur stockée dans une variable. Je veux log le pourcentage correspondant d'éthanol (40). Est-ce possible? J'ai pensé à regarder à travers l'objet et à obtenir la clé du nom de boisson, et à enregistrer ceci comme spirits[key].ethanol.

Answer 1

Vous devez lier un gestionnaire d'événements change à votre saisie.

Utilisez également la méthode find pour rechercher un objet dans votre tableau. find la méthode accepte une fonction fournie callback comme paramètre.

var spirits = [ 
 
    { name: 'Bourbon (80 proof)', ethanol: 40, sugar: 0, acid: 0 }, 
 
    { name: 'Rum (100 proof)', ethanol: 50, sugar: 0, acid: 0 } 
 
] 
 
spirits.forEach(function(item){ 
 
    $('select').append('<option>'+item.name+'</option>'); 
 
}); 
 
$('select').change(function(){ 
 
    var self=$(this); 
 
    var obj=spirits.find(function(item){ 
 
    return item.name==self.val(); 
 
    }); 
 
    console.log(obj.ethanol); 
 
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select></select>

Version pur javascript.

var spirits = [ 
 
    { name: 'Bourbon (80 proof)', ethanol: 40, sugar: 0, acid: 0 }, 
 
    { name: 'Rum (100 proof)', ethanol: 50, sugar: 0, acid: 0 } 
 
] 
 
spirits.forEach(function(item){ 
 
    var option=document.createElement('option'); 
 
    option.text=item.name; 
 
    document.getElementById('select').appendChild(option); 
 
}); 
 
document.getElementById('select').addEventListener('change',function(){ 
 
    var value=this.value; 
 
    var obj=spirits.find(function(item){ 
 
    return item.name==value; 
 
    }); 
 
    console.log(obj.ethanol); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select"> 
 
    <option disabled selected>Select</option> 
 
</select>