Блог

Я пытаюсь преобразовать свой массив так, чтобы его было легко использовать при рендеринге представлений

На данный момент у меня есть этот пример кода

 let arr = [
    {
        date: d.setDate(d.getDate() - 1),
        name: "john",
        country: "AU",
        text: "Hey"
    },
    {
        date: d.setDate(d.getDate() - 1),
        name: "jake",
        country: "US",
        text: "Hey"
    },
    {
        date:d.setDate(d.getDate() - 3),
        name: "jeff",
        country: "US",
        text: "Hey"
    },
    {
        date:d.setDate(d.getDate() - 5),
        name: "jared",
        country: "US",
        text: "Hey"
    },
    {
        date:d.setDate(d.getDate() - 2),
        name: "jane",
        country: "UK",
        text: "Hey"
    }
]

let hours = _.groupBy(arr, (result) => moment(result['date']).startOf('hour').format("LT"));
let day = _.groupBy(arr, (result) => moment(result['date']).startOf('day').format("MMM Do YY"));


console.log(day)
 

Я хочу сгруппировать данные по часам, которые сгруппированы по дням из одной строки «дата» (я могу сделать это отдельно с помощью функции _.groupby, но я хочу, чтобы она выводила комбинированный массив.

Желаемый результат должен быть примерно таким :

 {
    'Apr 15th 19': [
        {'4 pm':[
            {
                date: 1555318593445,
                name: 'ahmed',
                country: 'AU',
                text: 'Hey'
            }
        ]
    ]
}....
 

Используется _.flow() для создания функции, которая группирует по дням, а затем сопоставляет значения каждого дня и группирует их по часам:

 const { flow, groupBy, mapValues } = _

const fn = flow(
  arr => groupBy(arr, v => moment(v.date).startOf('day').format("MMM Do YY")),
  groups => mapValues(groups, g => _.groupBy(g, v =>
    moment(v.date).startOf('hour').format("LT")
  ))
)

const arr = [{"date":1555318593445,"name":"john","country":"AU","text":"Hey"},{"date":155531859300,"name":"jake","country":"US","text":"Hey"},{"date":1555316593445,"name":"jeff","country":"US","text":"Hey"},{"date":1555316593345,"name":"jared","country":"US","text":"Hey"},{"date":155531659400,"name":"jane","country":"UK","text":"Hey"}]

const result = fn(arr)

console.log(result) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script> 

И более короткая версия lodash / fp:

 const { flow, groupBy, mapValues } = _

const fn = flow(
  groupBy(v => moment(v.date).startOf('day').format("MMM Do YY")),
  mapValues(_.groupBy(v => moment(v.date).startOf('hour').format("LT")))
)

const arr = [{"date":1555318593445,"name":"john","country":"AU","text":"Hey"},{"date":155531859300,"name":"jake","country":"US","text":"Hey"},{"date":1555316593445,"name":"jeff","country":"US","text":"Hey"},{"date":1555316593345,"name":"jared","country":"US","text":"Hey"},{"date":155531659400,"name":"jane","country":"UK","text":"Hey"}]

const result = fn(arr)

console.log(result) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js lodash.fp.min.js)'></script> 

Комментарии Вопросы и ответы:

Чем поток отличается от цепочки?

Поток генерирует функцию, которая выполняет код в последовательности и передает результаты одного вызова функции следующему. Цепочка lodash запускает код, но пытается выполнить отложенную оценку и объединяет несколько вызовов в один, что означает, что цепочка .map.filter будет выполнять итерацию массива только один раз.

Однако за лень приходится платить, вам нужно импортировать весь модуль lodash, чтобы он работал. При использовании flow вы можете импортировать только те функции, которые вам нужны.

почему mapvalues был вторым шагом?

Результатом 1-й группы является объект { дата: {}, дата: {} ), и вам нужно сгруппировать значения каждого объекта отдельно. Для этого вам нужно сопоставить значения каждой даты и сгруппировать их по часам.