Как сгруппировать массив объектов по датам?

Question

[darktowerk56c]

Есть массив:

[
  {
    "date": "2017-10-16 12:07:07",
    "name_doc_type": "Расход",
    "id": 564564867361367,
    "image": "http://ecosned.ru/image/cache/catalog/categories/iz_fermerskogo_moloka/tvorog/7/ge-catalog-categories-iz_fermerskogo_moloka-tvorog-tvorozhnaya_massa_s_kuragoy-800x800.jpg",
    "name": "Творог 9% с курагой",
    "price": 121.0,
    "quantity": 45,
    "removed": 0
  },
  {
    "date": "2017-10-16 15:09:08",
    "name_doc_type": "Расчет",
    "id": 564564867361368,
    "image": "https://images.ua.prom.st/50389447_w640_h640_ncheskaya_s_grushej_200_g..jpg",
    "name": "Молочный Груша 200",
    "price": 180.0,
    "quantity": 65,
    "removed": 0
  },
  {
    "date": "2017-10-16 15:09:08",
    "name_doc_type": "Расчет",
    "id": 564564867361368,
    "image": "https://www.komus.ru/medias/sys_master/root/hd3/h93/9286922043422.jpg",
    "name": "Молочный Изюм 100",
    "price": 102.0,
    "quantity": 72,
    "removed": 0
  },
  {
    "date": "2017-10-16 18:11:09",
    "name_doc_type": "Приход",
    "id": 564564867361369,
    "image": "http://irecommend.ru/sites/default/files/imagecache/copyright1/user-images/299388/Ydfgl76IXe0nEM2gO6Ww.JPG",
    "name": "Молочный Традиция 100",
    "price": 115.0,
    "quantity": 60,
    "removed": 0
  },
  {
    "date": "2017-10-16 18:11:09",
    "name_doc_type": "Приход",
    "id": 564564867361369,
    "image": "https://www.utkonos.ru/images/photo/3054/3054289H.jpg",
    "name": "Аленка карамель 100г Акционный товар Большая скидка",
    "price": 73.9,
    "quantity": 99,
    "removed": 0
  },
  {
    "date": "2017-11-29 19:31:03",
    "name_doc_type": "Приход",
    "id": 564564867361363,
    "image": "https://tashkentcena.com/files/products/893eebe7b69146290886dc504a3328ef.jpeg",
    "name": "Горький коньяк 100",
    "price": 336.0,
    "quantity": 94,
    "removed": 0
  },
  {
    "date": "2017-11-29 19:31:03",
    "name_doc_type": "Приход",
    "id": 564564867361363,
    "image": "https://www.utkonos.ru/images/photo/3176/3176192H.jpg",
    "name": "Сыр 125г",
    "price": 131.0,
    "quantity": 64,
    "removed": 0
  },
  {
    "date": "2017-11-29 19:31:03",
    "name_doc_type": "Приход",
    "id": 564564867361363,
    "image": "https://www.utkonos.ru/images/photo/3265/3265004H.jpg",
    "name": "Молочный Яблоко 100",
    "price": 25.1,
    "quantity": 52,
    "removed": 0
  },
  {
    "date": "2017-11-29 19:31:03",
    "name_doc_type": "Приход",
    "id": 564564867361363,
    "image": null,
    "name": "Парус апельсин 1л",
    "price": 150.0,
    "quantity": 43,
    "removed": 1
  }
]

Надо объекты с одинаковыми датами сложить в отдельные массивы, что-то вроде вот этого:

const data = [
    {
        id: 1,
        date: '2017-10-16',
        docs: [
            {
                "date": "2017-10-16 18:11:09",
                "name_doc_type": "Приход",
                "id": 564564867361369,
                "image": "https://www.utkonos.ru/images/photo/3054/3054289H.jpg",
                "name": "Аленка карамель 100г Акционный товар Большая скидка",
                "price": 73.9,
                "quantity": 99,
                "removed": 0
            },
            {
                "date": "2017-10-16 18:11:09",
                "name_doc_type": "Приход",
                "id": 564564867361369,
                "image": "https://mariupolcena.com/files/products/9ff44136e6ccb0afb404ad26f727e67d.jpeg",
                "name": "Русская картошка чедар 50",
                "price": 46.3,
                "quantity": 51,
                "removed": 0
            },
            {
                "date": "2017-10-16 12:07:07",
                "name_doc_type": "Расход",
                "id": 564564867361367,
                "image": "https://www.utkonos.ru/images/photo/3265/3265004H.jpg",
                "name": "Молочный Яблоко 100",
                "price": 25.1,
                "quantity": 44,
                "removed": 0
            }
        ]
    }
]

Следующий объект, это будет следующая дата с относящимися к ней данными и так далее.

Answer 1

[0xD34F]

Object.values(arr.reduce((acc, n) => {
  const date = n.date.split(' ', 1)[0];
  (acc[0][date] = acc[0][date] || { id: ++acc[1], date, docs: [] }).docs.push(n);
  return acc;
}, [ {}, 0 ])[0])

или

[...arr.reduce((acc, n) => {
  const [ date ] = n.date.match(/\S+/);
  acc.set(date, acc.get(date) || { id: -~acc.size, date, docs: [] }).get(date).docs.push(n);
  return acc;
}, new Map).values()]

Answer 2

[float64]

Насколько я понял вам нужно агрегировать список JSON-объектов по указанному признаку (дате). Обычно такие вещи делаются движком БД - но вы возможно имеете дело с API который может не позволять составлять такие запросы.

Думаю что тут можно применить loopback-filters: https://github.com/strongloop/loopback-filters

Небольшая библиотека с собственным синтаксисом фильтров, позволяет делать достаточно сложные выборки по спискам объектов произвольной структуры.

Answer 3

[Шохрух Шаймардонов]

Используйте JSON.parse и JSON.stringify и циклом проставьте каждое свойство объекта в нужный тег

Comments

[darktowerk56c]

Я имею в виду: к какой логической структуре привести исходные данные? Т.е. мне нужно получить массив, первым значением которого будет объект, внутри которого будут данные. Этот первый объект и будет карточка с включенными данными. Например, первый объект, это всё, что относится к 14 июня.

[Шохрух Шаймардонов]

darktowerk56c, ну да. Массив объектов, свойства каждого объекта вставляете внутрь html тега

[darktowerk56c]

Я имею в виду, что из исходных данных мне нужно сделать что-то вроде вот этого:

const data = [
    {
        id: 1,
        date: '2017-10-16',
        docs: [
            {
                "date": "2017-10-16 18:11:09",
                "name_doc_type": "Приход",
                "id": 564564867361369,
                "image": "https://www.utkonos.ru/images/photo/3054/3054289H.jpg",
                "name": "Аленка карамель 100г Акционный товар Большая скидка",
                "price": 73.9,
                "quantity": 99,
                "removed": 0
            },
            {
                "date": "2017-10-16 18:11:09",
                "name_doc_type": "Приход",
                "id": 564564867361369,
                "image": "https://mariupolcena.com/files/products/9ff44136e6ccb0afb404ad26f727e67d.jpeg",
                "name": "Русская картошка чедар 50",
                "price": 46.3,
                "quantity": 51,
                "removed": 0
            },
            {
                "date": "2017-10-16 12:07:07",
                "name_doc_type": "Расход",
                "id": 564564867361367,
                "image": "https://www.utkonos.ru/images/photo/3265/3265004H.jpg",
                "name": "Молочный Яблоко 100",
                "price": 25.1,
                "quantity": 44,
                "removed": 0
            }
        ]
    }

[darktowerk56c]

Следующий объект, это будет следующая дата с относящимися к ней данными и так далее.

[Шохрух Шаймардонов]

darktowerk56c, так. Не понял, вам нужно из вашего массива сделать такой?

[darktowerk56c]

Судя по картинке, думаю, что да. Но Вы можете меня поправить.