我正在執行一項特定任務，但它不是動態的。下面我有一個eventList和一個response來自 API。基于事件串列，我必須重新排列回應并對其進行排序。
例如。下面，我有 eventList XM1, XM2, XM3，所以我必須重新排列response，使eventTitlewithXM1成為第一個元素，eventTitlewithXM2是第二個元素，并且XM3是第三個元素。這將重復直到response到達的最后一個元素。在下面的示例中，一旦 id1, 3, 2被順序推送，物件 id 4 就會被保留下來。但是物件 4 的 id 有 eventTitle XM2。這意味著 XM1 必須用空物件填充，XM3 必須用另一個空物件填充。
let eventList = [ "XM1", "XM2", "XM3" ];
let response = [
{ "id": 1, "eventTitle": "XM1" },
{ "id": 2, "eventTitle": "XM3" },
{ "id": 3, "eventTitle": "XM2" },
{ "id": 4, "eventTitle": "XM2" },
]
這種順序放置元素并填充間隙id=0的結果如下所示。
let sortResponse = [
{ "id": 1, "eventTitle": "XM1" },
{ "id": 2, "eventTitle": "XM2" },
{ "id": 3, "eventTitle": "XM3" },
{ "id": 0, "eventTitle": "XM1" },
{ "id": 4, "eventTitle": "XM2" },
{ "id": 0, "eventTitle": "XM3" },
]
這是我用來按順序對元素進行排序并在輸出中添加空物件的代碼。但這不是動態的。我一直都知道我的eventList意愿是三個要素。但我想讓它動態化，這樣即使我eventList有 10 個元素，我也應該能夠對其中缺少的物件進行排序和填充。有人可以讓我知道如何動態地實作這一點
let sortResponse = []
if (eventList.length === 3 && response.length > 0) {
let fil1 = response.filter(function (el) {
return el.eventTitle === eventList[0];
});
let fil2 = response.filter(function (el) {
return el.eventTitle === eventList[1];
});
let fil3 = response.filter(function (el) {
return el.eventTitle === eventList[2];
});
let obj = { id: 0, eventTitle: "" };
let obj1 = { id: 0, eventTitle: "" };
//check if fil1 has most elements and use it to iterate through each fil1 and push fil2 and fil3
if (fil1.length >= fil2.length && fil1.length >= fil3.length) {
for (let j = 0; j < fil1.length; j ) {
sortResponse.push(fil1[j]);
if (!fil2[j]) {
obj.eventTitle = eventList[1];
}
sortResponse.push(fil2[j] ? fil2[j] : obj);
if (!fil3[j]) {
obj1.eventTitle = eventList[2];
}
sortResponse.push(fil3[j] ? fil3[j] : obj1);
}
}
//check if fil2 has most elements and use it to iterate through each fil2 and push fil1 and fil3
else if (fil2.length >= fil1.length && fil2.length >= fil3.length) {
for (let j = 0; j < fil2.length; j ) {
if (!fil1[j]) {
obj.eventTitle = eventList[0];
}
sortResponse.push(fil1[j] ? fil1[j] : obj);
sortResponse.push(fil2[j]);
if (!fil3[j]) {
obj1.eventTitle = eventList[2];
}
sortResponse.push(fil3[j] ? fil3[j] : obj1);
}
}
//check if fil3 has most elements and use it to iterate through each fil3 and push fil1 and fil2
else if (fil3.length >= fil1.length && fil3.length >= fil2.length) {
for (let j = 0; j < fil3.length; j ) {
if (!fil1[j]) {
obj.eventTitle = eventList[0];
}
sortResponse.push(fil1[j] ? fil1[j] : obj);
if (!fil2[j]) {
obj1.eventTitle = eventList[1];
}
sortResponse.push(fil2[j] ? fil2[j] : obj1);
sortResponse.push(fil3[j]);
}
}
}
uj5u.com熱心網友回復：
這并沒有特別優化，因為我們在回圈中一遍又一遍地“尋找”下一個元素，但它非常動態，所以它可能適合你。
警告：如果您的初始回應物件包含事件標題不在 eventList 陣列中的事件，這也不會終止。在這種情況下，回圈將無限期地執行，并且只會繼續將“填充”事件添加到新的回應陣列中。
let eventList = [ "XM1", "XM2", "XM3" ];
let response = [
{ "id": 1, "eventTitle": "XM1" },
{ "id": 2, "eventTitle": "XM3" },
{ "id": 3, "eventTitle": "XM2" },
{ "id": 4, "eventTitle": "XM2" },
]
let newResponse = [];
let i = 0;
while(true) {
// Get the event title we are looking for. We'll have to manage looping through event titles kind of manually.
let currentEventTitle = eventList[i];
// Grab the index of the NEXT event that matches the current event title.
let nextEventIndex = response.findIndex( event => event.eventTitle === currentEventTitle );
// If our response has an event that matches, return that event from the current response array, otherwise we'll construct a "filler" event
let nextEvent = nextEventIndex !== -1 ? response.splice(nextEventIndex, 1)[0] : { "id": 0, "eventTitle": currentEventTitle };
// Push the found or constructed event to a new array.
newResponse.push(nextEvent);
// Now we'll need to manage our eventlist looping and exit condition.
// First increment our eventList index or start again from 0 if we've reached the end.
i ;
if(i === eventList.length) i = 0;
// Our exit condition is 1) if our starting response array is empty and 2) if we've gotten to the end of our event list
// which at this point means we've looped back around and our index is 0 again.
if(response.length === 0 && i === 0) break;
}
document.getElementById("result").innerText = JSON.stringify(newResponse, null, 4);<pre id="result"></pre>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/535067.html