Как разложить js массив состоящий из ID на индексы, индексы засунуть в input в блок относящийся к ID?

Question

[ppskmg]

Есть страница где создаются отдельные блоки, каждый блок является постом с уникальным ID + подключена библиотека SortableJS чтобы посты можно было сортировать drag and drop.
На выходе получаю массив с порядком блоков такого вида

var sort_position = '122|124|132|133|131|98|100|102|103|104|105|106|108|107'; // массив
var sort_id = sort_position.split('|'); //формат массива (122,124,...)

Чтобы сохранить значение в базу мне нужно выдернуть каждый ID присвоить ему порядковый номер который задан в массиве и засунуть индекс в input в конкретном посте и дальше отдать ajax
структура html примерно такая

• Длина массива не известна
  
• data-id так же не известны
  

<input id="sort_position"> // в этот инпут выгружаю массив для наглядности изменений
<ul>
     <li data-id="122"> <input class="sort_index"></li>
     <li data-id="124"><input class="sort_index"></li>
     <li data-id="132"><input class="sort_index"></li>
</ul>

Сложность именно в написании вложенных циклов который пройдётся по массиву соберёт индексы, следующим циклом переберёт элементы <li data-id="132"> сопоставит с результатом первого цикла if 132=132 и запишет в инпут index у которого родитель с id 132 .

А если содержимое измениться, то цикл повториться вновь и перезапишет все индексы.

Возможно есть проще решение но именно с текущим array у меня нет проблем с обновлением значений при перетаскивании блоков.

если просто получать значение индекса через elem.index(), то сложность с обновлением этого индекса при перетаскивании.

3 дня вожусь с этим.
...

Answer 1

[dollar]

Сложность именно в написании вложенных циклов который пройдётся по массиву соберёт индексы, следующим циклом переберёт элементы сопоставит с результатом первого цикла if 132=132 и запишет в инпут index у которого родитель с id 132

Думаю, всё решается в два этапа.

Первый этап - массив с индексами превращаем в объект с ключами. Ведь каждый раз искать элемент в массиве не красиво. А поиск по ключу (или хешу) - наше всё. Ну, можно ещё массив с индексами сделать, но это дело вкуса.

var obj = {};
sort_id.forEach(id=>{
  obj[id] = true;
});

Второй этап - перебираем все li и проверяем условия. Применяем какой-нибудь селектор - и дело в шляпе.

var arr = document.querySelectorAll('li[data-id]');
arr.forEach(li=>{
  let id = li.dataset.id;
  if (obj[id]) { //Нашли id в массиве sort_id
    //Что-то делаем. У нас есть всё: id и соответствующий li. Что ещё надо?
  }
});

3 дня вожусь с этим.

Ответ написан за 10 минут. :)

Comments

[ppskmg]

Спасибо добрый человек)) для меня это сложновато , сейчас попробую до кучи собрать.

if (obj[id]) { //Нашли id в массиве sort_id
     $('.input').val(не пойму как индекс сюда положить)
  }

[dollar]

if (obj[id]) { //Нашли id в массиве sort_id
  let input = li.querySelector('input');
  input.value = id;
}

Мой код в ответе, а также это уточнение, - на чистом JS, будет работать без библиотек.

[dollar]

Посмотрел код ниже. Если вам в инпут нужна позиция в массиве, то всё почти также. Запоминаем позицию в объекте, а потом извлекаем в цикле.

var obj = {};
sort_id.forEach((id,i)=>{
  obj[id] = i; //Сохраняем индекс, чтобы получать к нему доступ по ключу
});

//Все li с атрибутом data-id
var arr = document.querySelectorAll('li[data-id]');
arr.forEach(li=>{
  let id = li.dataset.id; //Извлекаем id из li
  if (obj[id]) { //Проверяем, есть ли такой id
    let input = li.querySelector('input');
    input.value = obj[id]; //Получаем индекс и пишем в инпут
  }
});

[ppskmg]

dollar, Спасибо большое, вроде разобрался, теперь борюсь с прослушиванием события чтобы каждый раз при смене значения array обновлялись инпуты. на клик поставил и он работает, но это как то топорно, а на смену содержимого переменной не выходит

$('.save_index').click(function(){ 
   const sortPosition = document.getElementById("block_sort").value;
          
          function syncIndexes(positions) {
  			const lis = [...document.querySelectorAll('ul > li')]
  
  				positions.split('|').forEach((pos, i) => {
    			lis.find(li => li.dataset.id == pos).querySelector('input').value = i
                  
                })
             
          }
      
			syncIndexes(sortPosition);
  });

[dollar]

На смену содержимого переменной нет события.
Но можно проверять переменную периодически.
Например, каждые 100мс.
Будем проверять строку.

let save_sort_position = sort_position;
setInterval(()=>{
  if (save_sort_position != sort_position) { //Переменная изменилась
    save_sort_position = sort_position;
    // Вызываем нужную функцию или прямо тут добавляем код
  }
}, 100);

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

[ppskmg]

dollar, не обновляет, в консоли пусто (sort_position поенял на sortPosition)

const sortPosition = document.getElementById("block_sort").value;
  let save_sort_position = sortPosition;
setInterval(()=>{
  if (save_sort_position != sortPosition) { //Переменная изменилась
    save_sort_position = sortPosition;
    // Вызываем нужную функцию или прямо тут добавляем код
    function syncIndexes(positions) {
  			const lis = [...document.querySelectorAll('ul > li')]
  
  				positions.split('|').forEach((pos, i) => {
    			lis.find(li => li.dataset.id == pos).querySelector('input').value = i
                  
                })
          }
      
			syncIndexes(sortPosition);
  
  }
}, 100);

такое тоже пробовал
setInterval(func,1000);

[dollar]

Ну, отлаживайте)
Чтобы выводило в консоль, надо добавить код, выводящий в консоль, очевидно.
Добавьте console.log в нужные места.
Например:
console.log('checkpoint!');
Или:

console.log('Проверяем переменную:', sortPosition);

Применив телепатию, могу сказать, что переменная sortPosition у вас не меняется. Она один раз инициализируется, да еще и в виде const, и больше не меняется. А таймер проверяет, не изменилась ли переменная. Так с какого перепугу она изменится? Внутри таймера извлекайте значение input каждый раз.

Но телепатия не всегда помогает. Здесь случай простой, а вообще поиск ошибок - это работа.

[ppskmg]

Огромное спасибо, на свежую голову разобрался

var sortposition = document.getElementById("block_sort").value;
let save_sort_position = sortposition; //сюда попадает переменная выше
setInterval(()=>{
  if (save_sort_position != sortposition) { //тут переменная та что выше проверяется 
    var sortposition = document.getElementById("block_sort").value; // этой строки не было, соответсвенно строка ниже не чего не получала (undefined)
    save_sort_position = sortposition; // проблема была в этой строке, в неё значение 
//переменной не попадало
//соответсвенно конструкция ниже пыталась обработать (undefined)
    function syncIndexes(positions) {
  			const lis = [...document.querySelectorAll('ul > li')]
  
  				positions.split('|').forEach((pos, i) => {
    			lis.find(li => li.dataset.id == pos).querySelector('input').value = i
                  
                })
             
          }
      
      syncIndexes(sortposition);
  }
}, 100);

[dollar]

ppskmg, лучше так:

setInterval(()=>{
  var sortposition = document.getElementById("block_sort").value;
  if (save_sort_position != sortposition) {

Ведь проверять изменения нужно каждый раз.

А если оптимизировать, то так:

var block_sort = document.getElementById("block_sort");
setInterval(()=>{
  var sortposition = block_sort.value;
  if (save_sort_position != sortposition) {

Answer 2

[alex]

Comments

[ppskmg]

Огромнейшее спасибо, просто от души, глядя на 6 строк понимаю какой же я тупой, гениально сам бы не написал точно, видать такое с опытом приходит, надеюсь.

[ppskmg]

var order = document.getElementById("block_sort").value; // как заставить обновить все индексы при изменении содержания этого инпута без перезагрузки страницы?
          const sortPosition = order;
          function syncIndexes(positions) {
  			const lis = [...document.querySelectorAll('ul > li')]
  
  				positions.split('|').forEach((pos, i) => {
    			lis.find(li => li.dataset.id == pos).querySelector('input').value = i
                })
          }

			syncIndexes(sortPosition)

при перетаскивании элемента значения не меняются в отличии от поля со списком

[alex]

ppskmg, значение block_sort кем меняется? SortableJS? если меняется юзером - просто вешаее обработчик события и в нем вызываете syncIndexes. если меняется самим SortableJS, то надо смотеть документацию к библиотеке, в ее апи наверняка есть какой нибудь коллбек в котором можно вызвать syncIndexes

[alex]

ppskmg, смотрите доку SortableJS, там их целая куча on*-хуков, выбирайте какой вам нужно

[ppskmg]

Alex, Да меняется SortableJS

var options = {
  group: 'Block',
  sort: true,
  animation: 100,
   onEnd: function (/**Event*/evt) {
    evt.oldIndex;  // element's old index within parent
    evt.newIndex;  // element's new index within parent
    evt.oldDraggableIndex;
	evt.newDraggableIndex;
  },
  store: {
		/**
		 * Get the order of elements. Called once during initialization.
		 * @param   {Sortable}  sortable
		 * @returns {Array}
		 */
		get: function (sortable) {
			//var order = localStorage.getItem(sortable.options.group.name);
          var order = document.getElementById("block_sort").value;
          
          const sortPosition = order;
          function syncIndexes(positions) {
  			const lis = [...document.querySelectorAll('ul > li')]
  
  				positions.split('|').forEach((pos, i) => {
    			lis.find(li => li.dataset.id == pos).querySelector('input').value = i
                })
          }

			syncIndexes(sortPosition)
			return order ? order.split('|') : [];
			
		},

		/**
		 * Save the order of elements. Called onEnd (when the item is dropped).
		 * @param {Sortable}  sortable
		 */
		set: function (sortable) {
			var order = sortable.toArray();// список сортировки
          $( '.block_sort' ).val(order.join('|')); // передача списка сортировки в input(array)
			//localStorage.setItem(sortable.options.group.name, order.join('|'));
		}
	}
  
};
       
events = [
  'onChoose',
  'onStart',
  'onEnd',
  'onAdd',
  'onUpdate',
  'onSort',
  'onRemove',
  'onChange',
  'onUnchoose'
].forEach(function (name) {
  options[name] = function (evt) {
    
    console.log({
      //'event': name,
      //'this': this,
      //'item': evt.item,
      //'from': evt.from,
      //'to': evt.to,
      //'oldIndex': evt.oldIndex,
      'newIndex': evt.newIndex,
      //'newDraggableIndex': evt.newDraggableIndex,
      //'index': $(this).index()
    });
    
    
    	//$('li.list-group-item').click(function(){
          //$('#save_storage').click(function(){
          
		//document.getElementById('storage_order').value = localStorage.getItem('Block');
		//});
    
    //$('li.list-group-item').click(function(){
		//document.getElementById('storage_order').value = $(this).index();
		//});
      

  };
});

Sortable.create(block, options);