xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

array group by key javascript

calendar

Array.reduce

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

result = array.reduce((h, obj) => Object.assign(h, { [obj.key]:( h[obj.key] || [] ).concat(obj) }), {})

var cars = [{ make: 'audi', model: 'r8', year: '2012' }, { make: 'audi', model: 'rs5', year: '2013' }, { make: 'ford', model: 'mustang', year: '2012' }, { make: 'ford', model: 'fusion', year: '2015' }, { make: 'kia', model: 'optima', year: '2012' }],

    result = cars.reduce(function (r, a) {
        r[a.make] = r[a.make] || [];
        r[a.make].push(a);
        return r;
    }, Object.create(null));

console.log(result);

groupBy

https://learnwithparam.com/blog/how-to-group-by-array-of-objects-using-a-key/

const groupBy = (array, key) => {
  return array.reduce((result, currentValue) => {
    (result[currentValue.color] = result[currentValue.color] || []).push(
      currentValue
    );
    console.log(result);
    return result;
  }, {});
};

// this step of code can be restructured to multiple lines, see below for the multi line code
(result[currentValue[key]] = result[currentValue[key]] || []).push(
  currentValue
);

// This is how the above code in multiple line
if (!result[currentValue[key]]) {
  result[currentValue[key]] = [];
}
result[currentValue[key]].push(currentValue);

_.groupBy

https://lodash.com/docs/4.17.2#groupBy

---

OK

const log = console.log;

const events = [
  {
    "id": 210404,
    "productId": 13602,
    "activityEventId": 8623896,
    "ticketCategoryId": 5246754,
    "ticketGroupId": 81798755,
    "start": 1617532218562,
    "end": 1617532218562,
    "ticketsNumber": 100,
    "lowPrice": 127.00,
    "status": 0,
    "priceLowest": false,
    "hasTicket": true,
    "availableNumbers": [
      1,
      2,
      3,
      4,
      5,
      6
    ]
  },
  {
    "id": 210403,
    "productId": 13602,
    "activityEventId": 7623896,
    "ticketCategoryId": 5246754,
    "ticketGroupId": 71798755,
    "start": 1617432218562,
    "end": 1617432218562,
    "ticketsNumber": 100,
    "lowPrice": 127.00,
    "status": 0,
    "priceLowest": false,
    "hasTicket": true,
    "availableNumbers": [
      1,
      2,
      3,
      4,
      5,
      6
    ]
  },
  {
    "id": 191837,
    "productId": 13602,
    "activityEventId": 1623896,
    "ticketCategoryId": 5246754,
    "ticketGroupId": 61798755,
    "start": 1585497600000,
    "end": 1585497600000,
    "ticketsNumber": 100,
    "lowPrice": 127.00,
    "status": 0,
    "priceLowest": false,
    "hasTicket": true,
    "availableNumbers": [
      1,
      2,
      3,
      4,
      5,
      6
    ]
  },
  {
    "id": 191812,
    "productId": 13602,
    "activityEventId": 1623891,
    "ticketCategoryId": 5246729,
    "ticketGroupId": 61798730,
    "start": 1585584000000,
    "end": 1585584000000,
    "ticketsNumber": 100,
    "lowPrice": 127.00,
    "status": 0,
    "priceLowest": false,
    "hasTicket": true,
    "availableNumbers": [
      1,
      2,
      3,
      4,
      5,
      6
    ]
  },
  {
    "id": 191701,
    "productId": 13602,
    "activityEventId": 5623852,
    "ticketCategoryId": 5246618,
    "ticketGroupId": 51798619,
    "start": 1585670400000,
    "end": 1585670400000,
    "ticketsNumber": 100,
    "lowPrice": 127.00,
    "status": 0,
    "priceLowest": false,
    "hasTicket": true,
    "availableNumbers": [
      1,
      2,
      3,
      4,
      5,
      6
    ]
  },
  {
    "id": 191749,
    "productId": 13602,
    "activityEventId": 4623876,
    "ticketCategoryId": 5246666,
    "ticketGroupId": 41798667,
    "start": 1585756800000,
    "end": 1585756800000,
    "ticketsNumber": 100,
    "lowPrice": 127.00,
    "status": 0,
    "priceLowest": false,
    "hasTicket": true,
    "availableNumbers": [
      1,
      2,
      3,
      4,
      5,
      6
    ]
  },
  {
    "id": 191737,
    "productId": 13602,
    "activityEventId": 3623870,
    "ticketCategoryId": 5246654,
    "ticketGroupId": 31798655,
    "start": 1585843200000,
    "end": 1585843200000,
    "ticketsNumber": 100,
    "lowPrice": 127.00,
    "status": 0,
    "priceLowest": false,
    "hasTicket": true,
    "availableNumbers": [
      1,
      2,
      3,
      4,
      5,
      6
    ]
  },
  {
    "id": 262539,
    "productId": 13602,
    "activityEventId": 1651249,
    "ticketCategoryId": 5319475,
    "ticketGroupId": 11872015,
    "start": 1588089600000,
    "end": 1588089600000,
    "ticketsNumber": 100,
    "lowPrice": 127.00,
    "status": 0,
    "priceLowest": false,
    "hasTicket": true,
    "availableNumbers": [
      1,
      2,
      3,
      4,
      5,
      6
    ]
  }
];



// log(`events`, events)

const dateShaper = (timestamp = ``) => {
  const date = new Date(timestamp)
  const dateString = date.toLocaleDateString();
  const timeString = date.toLocaleTimeString();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const weekDays = ["日", "一", "二", "三", "四", "五", "六"];
  const weekDay = weekDays[date.getDay()];
  return {
    dateString,
    timeString,
    year,
    month,
    day,
    weekDay,
  };
}

const thisYear = new Date().getFullYear();

const tabs = events.map((obj, i) => {
  const {
    start,
  } = obj;
  const date = new Date(start);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const tabName = thisYear === year ? `${month}月` : `${year}年${month}月`;
  // const tabGroupKey = thisYear !== year ? `${year}_` + `${month}`.padStart(2, `0`) : `${month}`.padStart(2, `0`);
  const tabGroupKey = `${year}_` + `${month}_`.padStart(3, `0`) + `${day}`.padStart(2, `0`);
  // const tabGroupKey = `${year}_${month}_${day}`;
  return {
    ...obj,
    tabName,
    tabGroupKey,
  };
});

// log(`tabs`, tabs)

const sortedArray = tabs.sort((a, b) => a.start > b.start ? 1 : -1);

// log(`sortedArray`, sortedArray)


// const groupBy = (array, key) => {
//   return array.reduce((result, currentValue) => {
//     result[currentValue.key] = result[currentValue.key] || [];
//     result[currentValue.key].push(
//       currentValue,
//     );
//     // console.log(result);
//     return result;
//   }, {});
// };

// const groupBy = (array, key) => {
//   return array.reduce((result, currentValue) => {
//     result[currentValue.key] = result[currentValue.key] || [];
//     result[currentValue.key].push(
//       currentValue,
//     );
//     // console.log(result);
//     return result;
//   }, []);// array
// };

const groupBy = (array, key) => array.reduce((h, obj) => Object.assign(h, { [obj[key]]:( h[obj[key]] || [] ).concat(obj) }), []);
// const groupBy = (array, key) => array.reduce((h, obj) => Object.assign(h, { [obj[key]]:( h[obj[key]] || [] ).concat(obj) }), {});
// const groupBy = (array, key) => array.reduce((h, obj) => Object.assign(h, { [obj.key]:( h[obj.key] || [] ).concat(obj) }), {});

//
const groupedArray = groupBy(sortedArray, `tabName`);
// const groupedArray = groupBy(sortedArray, `tabGroupKey`);

log(`groupedArray`, groupedArray)


// log(`groupedArray[0]`, groupedArray[0])

Object.keys(groupedArray).map((month, i) => {
  log(`tab month`, month, i)
})

Object.values(groupedArray).map((month, i) => {
  log(`tab month`, month, i)
})


Object.entries(groupedArray).map((month, i) => {
  const {
    // key,
    // value,
  } = month;
  log(`tab month key`, month[0], i)
  log(`tab month value`, month[1], i)
})

---