0

Есть 2 колонки (в одну рендерим данные с сервера , во вторую добавляем данные с 1й при нажатии добавить ) , есть кнопка при нажатии на которую должны сохраняться элементы со 2й колонки в localStorage и при перезагрузке рендериться туда. Как работать с localStorage я знаю , проблема в том какие именно данные сохранять со 2й колонки и как потом их фильтровать с основным массивом данных для рендера или сразу брать данные и сохранять их в отдельный массив/объект (думал про сохранения id в массиве но потом не понимаю как этот массив c id сравнить с основным массивом). Если не трудно подкиньте идею или подобный пример может кто делал!

1 ответ 1

0

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

2
  • Я получаю JSON объект в котором есть id. Эти id я как вы и написали сохранял в массив в localstorage. Проблема в другом возникала. Как образовать новый массив при сравнении этих 2х. Например ( let arr = [10,20,30] let newArr = arr.filter(el => {return el>10}) тут все просто. а там у нас 2 массива которые нужно перебрать в fillter тут и возникает ступор
    – TS E
    1 мар 2018 в 17:21
  • Вам просто нужно добавить вложенный цикл. Это можно сделать двумя for или, как в ответе, с помощью lodash. Ответ обновлён.
    – Dan
    2 мар 2018 в 11:56

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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