0

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

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();
    });
  }); 

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

3
  • Нужно использовать библиотеку fetch или axios, заимпортить и сделать функции, которые будут рендерить данные. Не советую использовать вашу форму запроса.
    – kiten
    8 окт 2020 в 12:38
  • вы отфильруйте сначала нужные данные, а потом уже добавляйте, и не по одному элементу в DOM за раз, а всю пачку разом
    – teran
    8 окт 2020 в 12:46
  • если бы я знал как это сделать, то несомненно сделал) пока у меня к сожалению скудные познания
    – Leonid
    8 окт 2020 в 13:04

1 ответ 1

0

Запоминайте 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);
});
3
  • Спасибо, но значения все-равно повторяются (
    – Leonid
    8 окт 2020 в 14:05
  • @Leonid там вместо key, надо item.region_id, пофиксил.
    – teran
    8 окт 2020 в 20:43
  • спасибо огромное, так работает
    – Leonid
    9 окт 2020 в 7:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.