Ошибка в функции для сортируемого списка с использованием локального хранилища

Question

Я использую эту функцию с отсортированными списками Framework7, чтобы сохранить позицию порядка списка, я могу сохранить их в локальном хранилище, но я не могу их прочитать, я получил эта ошибка:

Uncaught TypeError: не удается прочитать свойство 'идентификатор' неопределенной

И его ВЕ этой линии:

if (ls[j] === itemsArr[i].dataset.id) { 

Вот моя полная функция:

var list = document.getElementById('my-id'); 
var items = list.children; 
var itemsArr = []; 
for (var i in items) { 
itemsArr.push(items[i]); 
} 
// localStorage 
var ls = JSON.parse(localStorage.getItem('data-user-sort') || '[]'); 

for (var j = 0; j < ls.length; j++) { 
for (i = 0; i < itemsArr.length; ++i) { 
    if (ls[j] === itemsArr[i].dataset.id) { 
    list.appendChild(itemsArr[i]); 
    } 
}  
} 


$('.list-block.sortable').on('sort', function() { 
var newIdsOrder = []; 
$(this).find('li').each(function(){ 
    newIdsOrder.push($(this).attr('data-id')); 
}); 

localStorage.setItem('data-user-sort', JSON.stringify(newIdsOrder)); 
}); 

и вот мой HTML:

<div class="list-block sortable"> 
     <ul id="my-id"> 
     <li data-id="1"> 
      <a href="#" class="item-link item-content"> 
      <div class="item-inner"> 
       <div class="item-title">Item 1</div> 
      </div> 
      </a> 
      <div class="sortable-handler"></div> 
     </li> 
     <li data-id="2"> 
      <a href="#" class="item-link item-content"> 
      <div class="item-inner"> 
       <div class="item-title">Item 2</div> 
      </div> 
      </a> 
      <div class="sortable-handler"></div> 
     </li> 
     <li data-id="3"> 
      <a href="#" class="item-link item-content"> 
      <div class="item-inner"> 
       <div class="item-title">Item 3</div> 
      </div> 
      </a> 
      <div class="sortable-handler"></div> 
     </li> 
     </ul> 
    </div> 

Любая помощь?

Answer 1

Проблема заключается в том, что переменная itemsArr не только содержит объекты «li», поэтому, когда вы перебираете ее, вы пытаетесь получить доступ к свойству «набор данных» на объектах, где они не существуют.

Если вы отлаживаете свой javascript, вы увидите, что у вас есть 3 класса «li», длина списка и 2 функции (item() и namedItem()), и из-за этого вы получаете эту ошибку после третьей итерации ,

Как уже сказал кто-то, вам сначала необходимо проверить, существует ли свойство, но код, который он предоставил вам, будет терпеть неудачу, потому что он также проверяет идентификатор свойства набора данных, который является неопределенным значением. Этот код должен работать для вас:

for (var j = 0; j < ls.length; j++) { 
    for (i = 0; i < itemsArr.length; ++i) { 
    if(itemsArr[i].dataset !== undefined){ 
     if (ls[j] === itemsArr[i].dataset.id) { 
     list.appendChild(itemsArr[i]); 
     } 
    } 
    }  
} 

Вы также можете проверить это jsfiddle с этой проверки https://jsfiddle.net/7bv849wc/1/

Отредактировано потому, что я забыл добавить индекс на itemsArr *

Answer 2

Не похоже на локальное хранилище, которое выдает ошибку, но вместо этого пытается получить доступ к свойству (набору данных в вашем случае) элемента массива, который не определен. Вы можете проверить, что свойство не неопределенное первым:

if ((itemsArr[i].dataset.id !== undefined) && ls[j] === itemsArr[i].dataset.id) { 

Вы можете сделать дополнительные проверки ваших данных prevemt этих типов ошибок, надеюсь, это поможет вам в нужном русле.