Javascript 使用json数据填充，并在单击时显示值

我在JS是一个彻头彻尾的笨蛋，我最近开始玩API和JS，所以请耐心听我说。在过去的三天里，我一直在尝试自己做这件事，但经过大量搜索之后，我仍然只能在select of HTML中填充数据

2个问题

问题1。 我能够使用AJAX从API获取JSON数据。使用AJAX是因为我了解到它不需要浏览器刷新来获取新数据

接下来，我尝试在OnSuccess上填充HTML中的select

function onSuccess(jsonReturn) {
  $("#dropdown").empty();

  //console.log(jsonReturn);

  let dropdown = $('#dropdown');

dropdown.empty();

dropdown.append('<option selected="true" disabled>Choose Country</option>');
dropdown.prop('selectedIndex', 0);


// Populate dropdown with list of countries

  $.each(jsonReturn, function (key, entry) {
    dropdown.append($('<option></option>').attr('value', entry.data).text(entry.data));
  });


    var $dropdown = $('#dropdown'),
        $objView = $('#objView'),
        $docFragment = $(document.createDocumentFragment());

for (var prop in jsonReturn) {
    $('<option/>', {
        val: prop,
        text: prop
    }).appendTo($docFragment);
}

$dropdown.append($docFragment);

$dropdown.on('change', function() {
    var objString = JSON.stringify(jsonReturn[$dropdown.val()]);

    objString = objString.replace(/[\{\}\[\]\"]*/ig, '');    // Remove unwanted chars
    objString = objString.replace(/\,/ig, '<br/>');         // Replace commas with new lines (i.e. br tags)

    $objView.html(objString);
});

$dropdown.trigger('change');     

}

//if JSON fails
function onError() {
  $("#dropdown").html("i failed.");
}

它成功了。伟大的但是我试着做我想做的下一步，那就是当我点击一个国家的名称时，它应该显示其剩余的JSON数据以及名称和它们的值。 这不是确切的，但足够接近，但这是一个非常不同的困难？对我来说，解决方案，我无法理解

目前我的下拉列表如下所示

现在我打算这么做

但是对于每个国家，其他的JSON数据都是这样的

如果有人能指导我完成剩下的脚本编写，或者如果有任何简单/更好的方法可以完成我希望通过理解性解释完成的工作，我将不胜感激

问题2。如何减少AJAX抓取延迟

即使数据较少，我也注意到有一点滞后/缓慢。还是只是正常

如果有一个很好的方法开始学习JS的新手网站，图茨等。。一定要让我知道

提前谢谢

function onSuccess(jsonReturn) {
  $("#dropdown").empty();

  //console.log(jsonReturn);

  let dropdown = $('#dropdown');

dropdown.empty();

dropdown.append('<option selected="true" disabled>Choose Country</option>');
dropdown.prop('selectedIndex', 0);


// Populate dropdown with list of countries

  $.each(jsonReturn, function (key, entry) {
    dropdown.append($('<option></option>').attr('value', entry.data).text(entry.data));
  });


    var $dropdown = $('#dropdown'),
        $objView = $('#objView'),
        $docFragment = $(document.createDocumentFragment());

for (var prop in jsonReturn) {
    $('<option/>', {
        val: prop,
        text: prop
    }).appendTo($docFragment);
}

$dropdown.append($docFragment);

$dropdown.on('change', function() {
    var objString = JSON.stringify(jsonReturn[$dropdown.val()]);

    objString = objString.replace(/[\{\}\[\]\"]*/ig, '');    // Remove unwanted chars
    objString = objString.replace(/\,/ig, '<br/>');         // Replace commas with new lines (i.e. br tags)

    $objView.html(objString);
});

$dropdown.trigger('change');     

}

//if JSON fails
function onError() {
  $("#dropdown").html("i failed.");
}