Заполните <select>данными json и отобразите значения при нажатии - PullRequest
1 голос
/ 11 апреля 2020

Я полный нуб на JS, я недавно начал играть с API и JS Так что, пожалуйста, потерпите меня. Теперь я пытался сделать это самостоятельно в течение последних трех дней, но после многих поисков, которые я все еще мог сделать, мне нужно было только заполнить данные в select из HTML.

2 вопроса.

Q1. Мне удалось получить данные JSON, используя AJAX из API. ( с использованием AJAX, потому что я узнал, что браузеру не нужно обновлять sh для получения новых данных )

    $(document).ready(function() {
  getDataJson();
});

function getDataJson(ajaxurl) {
  $.ajax({
    method: "GET",
    url: "https://corona.lmao.ninja/v2/jhucsse",  
    datatype: "json",
    success: onSuccess,
    error: onError
  });
}

Далее я попытался заполнить выбор в моем HTML OnSuccess

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 данные по клику с JavaScript это не точное, но достаточно близкое решение, но это совсем другое (трудное для меня) решение, которое я не мог понять.

в настоящее время мой выпадающий список выглядит следующим образом JSFIDDLE

Теперь я собираюсь сделать это Заполнить HTML Таблица определенными элементами из JSON Array

, но со всеми другими JSON данными, подобными этим, для каждой страны Как отображать JSON данные при клике с помощью JavaScript

Я буду очень признателен, если кто-то сможет наставьте меня с остальными сценариями или, может быть, с нуля, если есть какой-то простой / лучший способ сделать то, что я ожидаю, с понятным объяснением.

Q2. Как уменьшить задержку извлечения AJAX?

немного медленнее / медленнее, что я заметил даже с меньшим количеством данных. Или это просто нормально?

И если есть хороший способ начать обучение JS для новичков (site, tutes, et c ..), дайте мне знать.

Спасибо Заранее!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...