在通过给定数组映射时创建具有唯一键的新数组
[英]Creating new array with unique key while mapping through given array
问题描述
I am struggling with an array that i need to convert into a new array with unique keys.
我正在努力处理一个需要将其转换为具有唯一键的新数组的数组。 I have an array called 'mondayAvailability' which looks like this:我有一个名为“mondayAvailability”的数组，如下所示：
[
{
id: 1,
from_time: '09:00',
to_time: '10:00'
},
{
id: 2,
from_time: '16:00',
to_time: '17:30'
},
]
I need to extract 30-minute time slots based on the values of 'from_time' and 'to_time' of each item in the array, and create a new array called 'mondayTimeLabels', which will store these slots.我需要根据数组中每个项目的“from_time”和“to_time”的值提取 30 分钟的时隙，并创建一个名为“mondayTimeLabels”的新数组，它将存储这些时隙。 Each time slot will be an object containing a unique key so the new array looks like this:每个时隙将是一个包含唯一键的 object，因此新数组如下所示：
[
{
key: '1',
slotTime: 09:00 AM,
disabled: false
},
{
key: '2',
slotTime: 09:30 AM,
disabled: false
},
{
key: '3',
slotTime: 10:00 AM,
disabled: false
},
{
key: '4',
slotTime: 04:00 PM,
disabled: false
},
{
key: '5',
slotTime: 04:30 PM,
disabled: false
},
{
key: '6',
slotTime: 05:00 PM,
disabled: false
},
{
key: '7',
slotTime: 05:30 PM,
disabled: false
},
]
I could achieve most of what i desire with the code below.我可以用下面的代码实现我想要的大部分。 However the problem with the code below is that it doesn't return unique keys when the original array length > 1. So how could i change my code to ensure that the new array mondayTimeLabels will end up with items with a unique key?然而，下面代码的问题是，当原始数组长度 > 1 时，它不会返回唯一键。那么我如何更改我的代码以确保新数组 mondayTimeLabels 以具有唯一键的项目结束？ Thanks in advance.提前致谢。
let mondayTimeLabels = [];
let startTime;
let endTime;
let arrayLength;
let slotTime;
mondayAvailability.map(item => {
startTime = moment(item.from_time.substring(0,5), 'hh:mm')
endTime = moment(item.to_time.substring(0,5), 'hh:mm')
arrayLength = endTime.diff(startTime, 'minutes') / 30;
slotTime = startTime;
for (let x = 0; x <= arrayLength; x++) {
slotTime.add(x === 0 ? 0 : interval)
mondayTimeLabels.push({
key: x,
slotTime: slotTime.format('hh:mm A'),
disabled: false
})
}
})
3 个解决方案
解决方案1
0 已采纳 2020-04-13 05:10:57
You could just keep a counter for the keys outside of the loop, something like:您可以在循环之外为键保留一个计数器，例如：
let mondayAvailability = [{ id: 1, from_time: "09:00", to_time: "10:00", }, { id: 2, from_time: "16:00", to_time: "17:30", }, ]; let mondayTimeLabels = []; let startTime; let endTime; let arrayLength; let slotTime; let key = 1; mondayAvailability.map((item) => { startTime = moment(item.from_time.substring(0, 5), "hh:mm"); endTime = moment(item.to_time.substring(0, 5), "hh:mm"); arrayLength = endTime.diff(startTime, "minutes") / 30; slotTime = startTime; for (let x = 0; x <= arrayLength; x++) { slotTime.add(x === 0? 0: 30, "minutes"); mondayTimeLabels.push({ key: String(key), slotTime: slotTime.format("hh:mm A"), disabled: false, }); key++; } }); console.log(mondayTimeLabels);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
解决方案2
0 2020-04-13 05:12:14
You can use maps index option to create unique key, like您可以使用 maps 索引选项来创建唯一键，例如
let mondayTimeLabels = []; let startTime; let endTime; let arrayLength; let slotTime; mondayAvailability = [ { id: 1, from_time: '09:00', to_time: '10:00' }, { id: 2, from_time: '16:00', to_time: '17:30' }, ] mondayAvailability.map((item,index) => { startTime = moment(item.from_time.substring(0,5), 'hh:mm') endTime = moment(item.to_time.substring(0,5), 'hh:mm') arrayLength = endTime.diff(startTime, 'minutes') / 30; slotTime = startTime; unikey = index.toString(); for (let x = 0; x <= arrayLength; x++) { slotTime.add(x === 0? 0: 30); mondayTimeLabels.push({ key: unikey+x, slotTime: slotTime.format('hh:mm A'), disabled: false }) } }) console.log(mondayTimeLabels)
<:DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script> <title>JS Bin</title> </head> <body> </body> </html>
解决方案3
-1 2020-04-13 05:38:05
may be you need to define how many minutes the diff interval between these data, momen have that fungtion, you could use some thing like slotTime.add(moment.duration(30, 'minutes')) , have you tried this,not an efisien way but i think it's good starting point.可能你需要定义这些数据之间的差异间隔多少分钟，momen 有那个功能，你可以使用像slotTime.add(moment.duration(30, 'minutes'))这样的东西，你试过这个，而不是efisien 方式，但我认为这是一个很好的起点。
let key = 1;
mondayAvailability.map(item => {
startTime = moment(item.from_time.substring(0,5), 'hh:mm')
endTime = moment(item.to_time.substring(0,5), 'hh:mm')
arrayLength = endTime.diff(startTime, 'minutes') / 30;
slotTime = startTime;
for (let x = 0; x <= arrayLength; x++) {
if(x === 0){
mondayTimeLabels.push({
key:key,slotTime:startTime.format('hh:mm A'),disabled:false
})
}else if(x === arrayLength){
mondayTimeLabels.push({
key:key,slotTime:endTime.format('hh:mm A'),disabled:false
})
}else{
// add 30 minutes between start and endtime.
let add = slotTime.add(moment.duration(30, 'minutes'));
mondayTimeLabels.push({
key:key,slotTime:add.format('hh:mm A'),disabled:false
})
}
key++
}
})
console.table(mondayTimeLabels)
here is the result, when i tried that snipset.这是结果，当我尝试该片段时。
┌─────────┬─────┬────────────┬──────────┐
│ (index) │ key │ slotTime │ disabled │
├─────────┼─────┼────────────┼──────────┤
│ 0 │ 1 │ '09:00 AM' │ false │
│ 1 │ 2 │ '09:30 AM' │ false │
│ 2 │ 3 │ '10:00 AM' │ false │
│ 3 │ 4 │ '04:00 PM' │ false │
│ 4 │ 5 │ '04:30 PM' │ false │
│ 5 │ 6 │ '05:00 PM' │ false │
│ 6 │ 7 │ '05:30 PM' │ false │
└─────────┴─────┴────────────┴──────────┘
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.