Undefined при обращении к Ajax об'єкту

116

01 сентября 2019, 17:40

Пытаюсь сделать простой конвертер валют!Курс валют беру с сайта https://fixer.io через Api

//Load value 
    $.ajax({ 
        url: 'http://data.fixer.io/api/latest?access_key={!KEY!}',    
        dataType: 'jsonp', 
        success: function(json) { 
            for(let key in json.rates){ 
                $('.changeLoad').append('<option>'+key+'</option>') 
            } 
        } 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<select name="change" class="changeLoad" id="changeValuteFrom"> </select>

В селект подгружаю из айпи валюты! Дальше пытаюсь по клику взять value и получить значния валюты но в итоге получаю undefined!

$.ajax({ 
    url: 'http://data.fixer.io/api/latest?access_key={!KEY!}',    
    dataType: 'jsonp', 
    success: function(json) { 
        for(let key in json.rates){ 
            $('.changeLoad').append('<option>'+key+'</option>') 
        } 
    } 
}); 
 
$('#js-exchange-start').click(function(){ 
 
        let changeValuteFrom = $('#changeValuteFrom').val(); 
 
        $.ajax({ 
            url: 'http://data.fixer.io/api/latest?access_key={!KEY!}',    
            dataType: 'jsonp', 
            success: function(json) { 
                console.log(json.rates); 
                console.log(json.rates.RUB); 
                console.log(json.rates.changeValuteFrom); //undefined 
            } 
        }); 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<select name="change" class="changeLoad" id="changeValuteFrom"> </select> 
 
<button class="btn" id="js-exchange-start"><i class="fas fa-dice-d20"></i> Обменять</button>