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

Ваш ответ

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

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