Есть 2 колонки (в одну рендерим данные с сервера , во вторую добавляем данные с 1й при нажатии добавить ) , есть кнопка при нажатии на которую должны сохраняться элементы со 2й колонки в localStorage и при перезагрузке рендериться туда. Как работать с localStorage я знаю , проблема в том какие именно данные сохранять со 2й колонки и как потом их фильтровать с основным массивом данных для рендера или сразу брать данные и сохранять их в отдельный массив/объект (думал про сохранения id в массиве но потом не понимаю как этот массив c id сравнить с основным массивом). Если не трудно подкиньте идею или подобный пример может кто делал!
1 ответ
Cохраняйте массив этих ключей в хранилище.
При обновлении данных (перезагрузка страницы или AJSX-запрос) выбираете из полученного списка только те объекты, id которых совпадает с id из массива и добавляете их в правую колонку.
Для фильтрации можно использовать Array.prototype.filter из ES6 (если подключен Webpack на проекте) или простой цикл for. Можно ещё воспользоваться _.filter из lodash
Пример на lodash (используется _.includes, но можно было бы и _.find):
var dataFromServer = [];
for (var i = 0; i < 20; i++) {
dataFromServer.push({
id: i,
someData: '',
});
}
var savedData = [3, 6, 7, 12];
function includes(el) {
return _.includes(savedData, el.id);
}
const filtered = _.filter(dataFromServer, includes);
document.getElementById('original').innerHTML = JSON.stringify(dataFromServer);
document.getElementById('filtered').innerHTML = JSON.stringify(filtered);
#original,
#filtered {
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
original:
<div id="original">
</div>
filtered (should be [3, 6, 7, 12]):
<div id="filtered">
</div>
Пример на JSFiddle
-
Я получаю JSON объект в котором есть id. Эти id я как вы и написали сохранял в массив в localstorage. Проблема в другом возникала. Как образовать новый массив при сравнении этих 2х. Например ( let arr = [10,20,30] let newArr = arr.filter(el => {return el>10}) тут все просто. а там у нас 2 массива которые нужно перебрать в fillter тут и возникает ступор– TS E1 мар 2018 в 17:21
-
Вам просто нужно добавить вложенный цикл. Это можно сделать двумя for или, как в ответе, с помощью lodash. Ответ обновлён.– Dan2 мар 2018 в 11:56