Как создать массив уникальных объектов из API?

Question

Я пытаюсь отключить забронированное время из календаря, в зависимости от даты. Моя цель - создать массив, который будет содержать объекты с одной датой и массивом забронированных времен. Я создал API, который выводит что-то вроде этого:

"bookings": [
    {
     "_id": "5ce1b8792598adasf452",
     "workType": "Nail polishing",
     "client": "Mary Johnson",
     "date": "2019-05-31T00:00:00.000Z",
     "bookingTime": "09:00"
    },
    {
     "_id": "5ce1b8753hs53gasf452",
     "workType": "Makeup",
     "client": "Kate Bush",
     "date": "2019-05-31T00:00:00.000Z",
     "bookingTime": "10:00"
    }
]

Я пытался использовать наборы, фильтры, но я просто не могу понять, как реализовать его в своем собственном коде.

Фрагмент моего кода:

bookedTimes: []

fetchBookedTimes() {
      axios.get("http://localhost:8080/api/bookings").then(res => {
        for (var i = 0; i < res.data.bookings.length; i++) {
          this.bookedTimes.push({
            date: moment(res.data.bookings[i].date).format("YYYY-MM-DD"),
            times: [res.data.bookings[i].bookingTime.substring(0,2)]
          });
        }
      });
    }

Я ожидаю, что результат будет

bookedTimes: [
        {
          date: "2019-05-31",
          times: ["09", "10"]
        },
        {
          date: "2019-06-01",
          times: ["10", "11"]
        }
      ]

Но фактический результат равен

bookedTimes: [
        {
          date: "2019-05-31",
          times: ["09"]
        },
        {
          date: "2019-05-31",
          times: ["10"]
        },
        {
          date: "2019-06-01",
          times: ["10"]
        },
        {
          date: "2019-06-01",
          times: ["11"]
        }
      ]

Answer 1

Сначала проверьте, есть ли дата уже в массиве.Проверьте, существует ли «times» в «object.times», если нет, поместите его в массив «object.times».Пожалуйста, смотрите код ниже.

const date = moment(res.data.bookings[i].date).format("YYYY-MM-DD");
const times = res.data.bookings[i].bookingTime.substring(0, 2);

const arrayIndex = bookedTimes.findIndex(item => item.date === date);
//Check if date already exist in array
if (arrayIndex !== -1) {
  //Check if 'times' already exist in 'object.times'
  if (!bookedTimes[arrayIndex].times.includes(times)) {
    //Push 'times' in 'object.times'
    bookedTimes[arrayIndex].times.push(times);
  }
} else {
 //Push a new object into the array
  bookedTimes.push({
    date: date,
    times: [times]
  });
}

Answer 2

Вы можете просто использовать reduce()

const arr = [
    {
     "_id": "5ce1b8792598adasf452",
     "workType": "Nail polishing",
     "client": "Mary Johnson",
     "date": "2019-05-31T00:00:00.000Z",
     "bookingTime": "09:00"
    },
    {
     "_id": "5ce1b8753hs53gasf452",
     "workType": "Makeup",
     "client": "Kate Bush",
     "date": "2019-05-31T00:00:00.000Z",
     "bookingTime": "10:00"
    },
    {
     "_id": "5ce1b8753hs53gasf452",
     "workType": "Makeup",
     "client": "Kate Bush",
     "date": "2019-06-31T00:00:00.000Z",
     "bookingTime": "11:00"
    },
    {
     "_id": "5ce1b8753hs53gasf452",
     "workType": "Makeup",
     "client": "Kate Bush",
     "date": "2019-06-31T00:00:00.000Z",
     "bookingTime": "12:00"
    }
]


const res = arr.reduce((ac,{date,bookingTime}) => {
  ac[date] = ac[date] || {date,bookingTime:[]}

  ac[date].bookingTime.push(bookingTime.slice(0,2));
  return ac;

},{})
console.log(Object.values(res))

Answer 3

Согласно коду, фактический вывод правильный. Вы зацикливаете ответ и помещаете данные в массив. Если вы хотите сгруппировать их по дате, вам нужно создать объект, а затем преобразовать его в ожидаемый результат.

var result = res.data.bookings.reduce(function (defaultValue, booking) {
    var date = moment(booking.date).format("YYYY-MM-DD");
    defaultValue[date] = defaultValue[date] || {date: date, times: []};
    defaultValue[date].times.push(booking.bookingTime.substring(0,2));
    return defaultValue;
}, {});

console.log(Object.values(result));

Answer 4

Вы помещаете значения непосредственно в массив, но вам нужно сгруппировать их по дате, чтобы вы могли использовать объект, а затем в конце выдвинуть значения в массив

• Здесь темп используется для группировки значений по дате
• Мы проверяем дату, когда она существует, мы помещаем значение времени в массив times, если не создаем новое свойство в temp
• В конце мы выдвигаем значения в this.bookedTimes массив

---

fetchBookedTimes() {
      axios.get("http://localhost:8080/api/bookings").then(res => {
        let temp = {}
        for (var i = 0; i < res.data.bookings.length; i++) {
          let date = moment(res.data.bookings[i].date).format("YYYY-MM-DD"),
          let time = [res.data.bookings[i].bookingTime.substring(0,2)]
          temp[date] = temp[date] || {date: date, times:[]}
          temp[date].times.push(time)
          });
        }
      this.bookedTimes.push(Object.values(temp))
      });
    }