Как создать JSON сгруппированы по дате в JS?

Question

У меня есть массив объектов, отсортированных по дате:

const alerts = [{ 
    id: 1, date: '2018-10-31T23:18:31.000Z', name: 'Joke', title: 'this is the first 1' 
}, { 
    id: 2, date: '2018-10-30T23:18:31.000Z', name: 'Mark', title: 'this is the second one' 
}]

Я пытаюсь «сгруппировать» оповещения по дате, поэтому пытаюсь создать «разделы даты» с заголовком даты, результат должен выглядеть примерно так:

const sections = [{
   date: '2018-10-31T23:18:31.000Z',
   heading: 'today',
   alerts: [{ id: 1, date: '2018-10-31T23:18:31.000Z', name: 'Joke', 
   title: 'this is the first one' }]
}, {
   date: '2018-10-30T23:18:31.000Z',
   heading: 'Yesterday',
   alerts: [{ id: 2, date: '2018-05-30T23:18:31.000Z', name: 'Mark', 
   title: 'this is the second one' }]
}]

Я что-то пробовал, но не могу понять, как получить оповещения с той же датой в подпорке оповещений:

const sections2=alerts.map(a =>
    ({
        date: a.date,
        heading:'today new',
        alerts:alerts
    })
)

Answer 1

Может быть, вам нужно что-то подобное? У меня не было много времени для этого, и последний разбор массива мог бы быть выполнен более изящным способом;)

var alerts = [
    { id: 1, date: '2018-10-31T23:18:31.000Z', name: 'Joke', title: 'this is the first 1' },
    { id: 3, date: '2018-10-31T23:44:31.000Z', name: 'Joke1', title: 'this is the 2nd' },
    { id: 2, date: '2018-10-30T23:18:31.000Z', name: 'Mark', title: 'this is the second one' },
    { id: 4, date: '2018-10-30T23:45:31.000Z', name: 'Mark1', title: 'this is the 3rd' },
    { id: 5, date: '2018-10-27T23:18:31.000Z', name: 'Mark2', title: 'this is the 4th' },
];

var processedAlerts = [], finalAlerts;

(function(initAlerts){
    //iterate through array to make keys to group by day
    for(var i = 0; i < initAlerts.length; i++){
        processedAlerts[i] = initAlerts[i];
        //substring here can be more sophisticated - this was faster
        initAlerts[i].keyDate = initAlerts[i].date.substr(0, 10);
    }

    //supporting function to convert string to date
    //to acheve more detailed sorting that includes time
    //just use date object and use hours, minutes and/or seconds to create Date object
    function dateFromString(strDate){
        var date, tmpDate;

        //convert string to array - I assume that date format is always the same
        //yyyy-mm-dd and will become Array 0: year, 1: month, 2: day of the month
        tmpDate = strDate.split("-");

        //moths in js are zero pased so Jan is 0, Feb is 1 and so on
        //so we want to substract 1 from human readable month value to get correct date
        date = new Date(tmpDate[0], tmpDate[1]-1, tmpDate[2]);

        return date;
    }

    //function used to compare dates and passed to sort function
    function comparedates(obj1, obj2){
        var date1, date2;

        date1 = dateFromString(obj1.keyDate);
        date2 = dateFromString(obj2.keyDate);

        let comparison = 0;

        if(date1>date2){
            comparison = 1;
        } else if(date1<date2){
            comparison = -1;
        }

        //to achieve reverse just multiply comparison result by -1
        return comparison*(-1);
    }

    function getHeader(date){
        //here place logic to generate header
        //this involves comparing dates probably from keyDate

        return "temp header: " + date.toString()
    }

    //sort the array by keyDate from newest to oldest
    processedAlerts.sort(comparedates);

    //final array rebuild
    //pass here sorted array
    finalAlerts = (function(arrayAlerts){
        var aAlerts = [], k = 0;

        for(var j = 0; j < arrayAlerts.length; j++){
            //check if entry for date exists
            //if no than create it
            if(!aAlerts[k]){
                aAlerts[k] = {
                    //removed title because I asummed that each alert has unique title and put them in alerts instead
                    date: arrayAlerts[j].keyDate, //agroupped date
                    heading: getHeader(arrayAlerts[j].keyDate), //update this function to return personalized heading
                    //here you can shape the alert object how you need
                    //I just passed it as it was
                    alerts: [arrayAlerts[j]] //array with first object inside
                };
            } else {
                //add another alert to day
                aAlerts[k].alerts.push(arrayAlerts[j]) //array with first object inside
            }

            //increasing final array key
            //if there is previous entry and keys are the same for current and previous
            if(arrayAlerts[j-1] && (arrayAlerts[j].keyDate == arrayAlerts[j-1].keyDate)){
                k++;
            }
        }

        return aAlerts;

    })(processedAlerts);

})(alerts);

console.log(finalAlerts);

Answer 2

Вы можете использовать регулярное выражение, чтобы соответствовать части даты, которую вы хотите, а затем сгруппировать свои данные. Вы можете добавить туда заголовок, который вы хотите. Надеюсь, это поможет.

const alerts = [
    { id: 1, date: '2018-10-31T23:18:31.000Z', name: 'Joke', title: 'this is the first 1' },
    { id: 2, date: '2018-10-30T23:18:31.000Z', name: 'Mark', title: 'this is the second one' },
    { id: 3, date: '2018-10-30T23:14:32.000Z', name: 'Mark', title: 'this is the third one' }
];

const groupByDate = (data) => {

    return data.reduce((acc, val) => {

        const date = val.date.match(/\d{4}-\d{2}-\d{2}/g).toString();

        const item = acc.find((item) => item.date.match(new RegExp(date, 'g')));

        if (!item) acc.push({ date: val.date, alerts: [val], heading: 'some heading' });

        else item.alerts.push(val);

        return acc;

    }, []);
};

console.log(groupByDate(alerts));

Answer 3

const alerts = [
    { id: 1, date: '2018-10-31T23:18:31.000Z', name: 'Joke', title: 'this is the first 1' },
    { id: 2, date: '2018-05-30T23:18:31.000Z', name: 'Mark', title: 'this is the second one' }
]

const grouping = _.groupBy(alerts, element => element.date.substring(0, 10))
const sections = _.map(grouping, (items, date) => ({
  date: date,
  alerts: items
}));

console.log(sections);

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

Не можете помочь вам с заголовками - что если это не "сегодня" или "вчера"?

Answer 4

С моей точки зрения, на самом деле это не map, что вам нужно здесь, map вернет новый массив, но не то, что вы хотите. Вы можете сделать это с 2 for заявлениями

let total = [];
     for (let j = 0; j < alerts.length; j++) {
          let item = alerts[j];
          let foundDate = false;
          for (let i = 0; i < total.length; i++) {
            if (total[i].date === item.date) {
              foundDate = true;
              total.alerts.push(item);
            }
          }
          if (!foundDate) {
            console.log("!found");
            total.push({
              date: item.date,
              heading: "Yesterday",
              alerts: [item]
            });
          }
        }

Если вы console.log yout total массив, будет содержать то, что вы хотите. Если вам нужно другое объяснение, пожалуйста, дайте мне знать.

Answer 5

Я чувствую, что вы спрашиваете пару вещей здесь. Ключевой момент - как группировать по дням с датой.

Для этого вам сначала нужно знать, как группировать. Этот ответ может помочь с этим.

Что касается группировки по дням, есть несколько способов сделать это. Самое простое, что я могу придумать, это обрезать все после «Т» в строке даты и отсортировать это.