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"
    }
]

我曾尝试使用Sets，filters，但似乎无法将其实现为自己的代码。

我的代码段：

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数组中。我们在temp上创建新属性
最后，我们将值推入<?xml version="1.0"?> <ArrayOfQueueTask xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <QueueTask> <Task> <AudioTracks> <AudioTrack> <IsNotifying>true</IsNotifying> <DRC>0</DRC> <Gain>0</Gain> <MixDown>5point1</MixDown> <Encoder>Ac3</Encoder> <SampleRate>0</SampleRate> <EncoderRateType>Bitrate</EncoderRateType> <Bitrate>448</Bitrate> <Quality>-1</Quality> <TrackName/> <IsDefault>false</IsDefault> <SampleRateDisplayValue>Auto</SampleRateDisplayValue> <ScannedTrack> <TrackNumber>1</TrackNumber> <Language>English</Language> <LanguageCode>eng</LanguageCode> <Description>English (E-AC3) (5.1 ch)</Description> <Codec>16777216</Codec> <SampleRate>48000</SampleRate> <Bitrate>224000</Bitrate> <ChannelLayout>128000</ChannelLayout> </ScannedTrack> </AudioTrack> </AudioTracks> </Task> </QueueTask> </ArrayOfQueueTask>数组

this.bookedTimes

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

根据代码，实际输出正确。您正在循环响应并将数据推入数组。如果要按日期对它们进行分组，则必须创建一个对象，然后将其转换为预期的输出。

let p = {
  x: 10000,
  y: 10000
}

let arr = [{
  x: 35,
  y: 10001
}, {
  x: 2478,
  y: 38
}]

function getDiaDist(point){
  return Math.sqrt(Math.pow(point.x,2) + Math.pow(point.y,2))
}

function getDistance(p1,p2){
  return getDiaDist({x:p1.x - p2.x, y:p1.y - p2.y})
}

function getNearestPoint(arr,point){
  let min = Infinity;
  let result = arr[0]
  arr.forEach(a => {
    let dist = getDistance(a,point);
    if(dist > min){
      min = dist
      result = a;
    }
  })
  return result;
}



console.log(getNearestPoint(arr,p))

Answer 4

首先，检查数组中是否已有日期。检查“ objects.times”中是否已经存在“ 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]
  });
}

如何从api生成唯一对象的数组？

4 个答案: