i want to use ajax variable in other function - json

Question

I want to use modal, so i get the data value from ajax.
the data is like that [{'source_name': '인터넷', 'description': '여행자료', 'source_slug': '_1', 'subject_name': '여행', 'subject_slug': '_6'}]
I want to put the value of source_name "인터넷" to source_name variable.
I want to use soure_name variable at this line.
html += '<li><span> 출처 : ' + source_name + ''
but source_name is undefined.
please help me
this is code.
function showModal(){
var pk = $(this).find('img').attr('id');
$.ajax({
url : '/photo/' + pk + '/',
async: false,
success: function(data){
data= JSON.stringify(data)
var source_slug = data[0]["source_slug"];
var source_name = data[0]["source_name"];
var description = data[0]["description"];
var subject_slug = data[0]["subject_slug"];
var subject_name = data[0]["subject_name"];
}
});
var src = $(this).find('img').attr('src');
var largeImg = $(this).find('img').attr('data-bsp-large-src');
if(typeof largeImg === 'string'){
src = largeImg;
}
var index = $(this).attr('data-bsp-li-index');
var ulIndex = $(this).parent('ul').attr('data-bsp-ul-index');
var ulId = $(this).parent('ul').attr('data-bsp-ul-id');
var theImg = $(this).find('img');
var pText = $(this).find('.text').html();
var modalText = typeof pText !== 'undefined' ? pText : 'undefined';
var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null;
clicked.img = src;
clicked.prevImg = parseInt(index) - parseInt(1);
clicked.nextImg = parseInt(index) + parseInt(1);
clicked.ulIndex = ulIndex;
clicked.ulId = ulId;
$('#bsPhotoGalleryModal').modal();
var html = '';
var img = '<img src="' + clicked.img + '" class="img-responsive"/>';
html += img;
html += '<span class="' + settings.iconClose + ' bsp-close"></span>';
html += '<div class="bsp-text-container">';
html += '<li><span> 출처 : ' + source_name + ''
html += '</span></li>'
html += '<li><span> 과목 및 단원 :' + subject_name + ''
html += '<li><span>' + description + '</span></li>'
html += '</div>';
html += '<a class="bsp-controls next" data-bsp-id="'+clicked.ulId+'" href="'+ (clicked.nextImg) + '"><span class="' + settings.iconRight + '"></span></a>';
html += '<a class="bsp-controls previous" data-bsp-id="'+clicked.ulId+'" href="' + (clicked.prevImg) + '"><span class="' + settings.iconLeft + '"></span></a>';
$('#bsPhotoGalleryModal .modal-body').html(html);
$('.bsp-close').on('click', closeModal);
showHideControls();
}

Answer 1

You need to make the change inside success not after:
function showModal(){
var pk = $(this).find('img').attr('id');
$.ajax({
url : '/photo/' + pk + '/',
async: false,
success: function(data){
data= JSON.stringify(data)
var source_slug = data[0]["source_slug"];
var source_name = data[0]["source_name"];
var description = data[0]["description"];
var subject_slug = data[0]["subject_slug"];
var subject_name = data[0]["subject_name"];
var src = $(this).find('img').attr('src');
var largeImg = $(this).find('img').attr('data-bsp-large-src');
if(typeof largeImg === 'string'){
src = largeImg;
}
var index = $(this).attr('data-bsp-li-index');
var ulIndex = $(this).parent('ul').attr('data-bsp-ul-index');
var ulId = $(this).parent('ul').attr('data-bsp-ul-id');
var theImg = $(this).find('img');
var pText = $(this).find('.text').html();
var modalText = typeof pText !== 'undefined' ? pText : 'undefined';
var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null;
clicked.img = src;
clicked.prevImg = parseInt(index) - parseInt(1);
clicked.nextImg = parseInt(index) + parseInt(1);
clicked.ulIndex = ulIndex;
clicked.ulId = ulId;
$('#bsPhotoGalleryModal').modal();
var html = '';
var img = '<img src="' + clicked.img + '" class="img-responsive"/>';
html += img;
html += '<span class="' + settings.iconClose + ' bsp-close"></span>';
html += '<div class="bsp-text-container">';
html += '<li><span> 출처 : ' + source_name + ''
html += '</span></li>'
html += '<li><span> 과목 및 단원 :' + subject_name + ''
html += '<li><span>' + description + '</span></li>'
html += '</div>';
html += '<a class="bsp-controls next" data-bsp-id="'+clicked.ulId+'" href="'+ (clicked.nextImg) + '"><span class="' + settings.iconRight + '"></span></a>';
html += '<a class="bsp-controls previous" data-bsp-id="'+clicked.ulId+'" href="' + (clicked.prevImg) + '"><span class="' + settings.iconLeft + '"></span></a>';
$('#bsPhotoGalleryModal .modal-body').html(html);
$('.bsp-close').on('click', closeModal);
showHideControls();
}
});}