Javascript functions and variables i dont get it to work

Question

I am working on a jquery mobile webapp. I start with a form, if it's submitted I want to use multiple functions to fill a listview. After all functions are done, I want to refresh the listview and change to the page.

<script type="text/javascript">
function getBike(frameNumber){
// Make request and fill result page

soapreq = $.getJSON('json.php?framenummer='+frameNumber, function(data) {
    // Save data to variable for later use.
    bicycleData = data;
    list += '<li data-role="list-divider">'+data.merk+' '+ data.type+'</li>';
    list += '<li>'
        list += '<div class="search_desc">'
            list += '<div class="row">'
                list += '<div class="key">Merk:</div>';
                list += '<div class="value">'+data.merk+'</div>';
            list += '</div>'
            list += '<div class="row">'
                list += '<div class="key">Type:</div>';
                list += '<div class="value">'+data.type+'</div>';
            list += '</div>'
            list += '<div class="row">'
                list += '<div class="key">Framehoogte: </div>';
                list += '<div class="value">'+data.maat+'</div>';
            list += '</div>';
            list += '<div class="row">'
                list += '<div class="key">Versnellingen: </div>';
                list += '<div class="value">'+data.versnellingen+'</div>';
            list += '</div>';
            list += '<div class="row">'
                list += '<div class="key">Modeljaar: </div>';
                list += '<div class="value">'+data.modeljaar+'</div>';
            list += '</div>';
            list += '<div class="row">'
                list += '<div class="key">Adviesprijs: </div>';
                list += '<div class="value">'+data.advprijs+'</div>';
            list += '</div>';
            list += '<div class="row">'
                list += '<div class="key">Status: </div>';
                list += '<div class="value">'+data.status+'</div>';
            list += '</div>';
        list += '</div>';
        list += '<div class="bike_image"><img class="bike_image" src="'+data.image+'" onclick="openPopup('+data.merk+')"></div><li>';
});

// If request succesful
soapreq.complete(function() {
    console.log( 'getWilmarBike request was succesful' );
    succes = 1;
});
// If request failed
soapreq.fail(function() {
  console.log( "getBike request failed" );
  succes = 0;
});
return {"succes":succes, "list": list, "data": bicycleData };
}
</script>

Now I want to use the return values; I would expect to do it this way:

stepOne = new getWilmarBike(frameNumber.value);
console.log(stepOne);

I tried this, but the console log is:

Object {succes: "", list: "", data: ""} 

So I'm doing something wrong. If someone could help me out with this..