Данные из json вывести на страницу

220

19 апреля 2022, 16:40

Приходят данные в виде

0 {
address: "address"
name: "name"
phones: "phones"
region: "Витебск"
region_id: "19"
  },
1 {
address: "address"
name: "name"
phones: "phones"
region: "Лида"
region_id: "34"
  },
2 {
address: "address"
name: "name"
phones: "phones"
region: "Витебск"
region_id: "19"
  },

..... и т.д.

Нужно создать селект со списком регионов, остальные данные необходимо вывести в таблицу. Забить селект приходящими значениями я смогу

 $.ajax(settingsList).done(function (response) {
    console.log(response);
    $.each(response, function (key, item) {
      $.each(item, function (index, value) {
  
        console.log(item.region);
      });
      var gotoOption = "<li title='" + item.region +"' class='goto-option'>" + item.region+"</li>";
      $(gotoOption).appendTo('.goto-list');
      
      console.info(item.region);
    });
    $('.goto-list li').click(function (e) {
      var optionText = $(this).text();
      $('.goto-selected').text(optionText).attr('title', optionText);
      e.preventDefault();
    });
  });

Но проблема в том, что регионы дублируется, а как перебрать я не соображу и при добавлении таким образом очень заметно замедляется загрузка страницы, т.к. список большой. Буду крайне признателен за помощь

Answer 1

Запоминайте id которые уже добвлены куда-нибудь (map). А пункты просто в строковую переменную добавляйте (list) по мере встречи новых регионов.

let map = { };
let list = "";
$.each(response, function (key, item) {
    if(map[item.region_id]) return;
    map[item.region_id] = item.region_id;
    list += "<li title='" + item.region +"' class='goto-option'>" + item.region+"</li>";
});

потом, когда все сформировали, единожды добавьте это в DOM.

$(".goto-list").append(list);

и обработчик поадекватней навесьте

$('.goto-list').on('click', '.goto-option', function () {
    var optionText = $(this).text();
    $('.goto-selected').text(optionText)
                      .attr('title', optionText);
});