循环对象数组并为缺少的条目添加 obj

Question

我正在执行一项特定任务，但它不是动态的。下面我有来自 API 的 eventList 和 response。基于事件列表，我必须重新排列响应并对其进行排序。

例如。下面，我有事件列表XM1, XM2, XM3，所以我必须重新排列response，这样eventTitle和XM1成为第一个元素，eventTitle和XM2是第二个元素，XM3是第三个元素元素。这将重复直到到达 response 的最后一个元素。在下面的示例中，一旦 id 1, 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 将是 3 个元素。但我想让它动态化，这样即使我的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]);
      }
    }
}

Answer 1

这并没有特别优化，因为我们在循环中一遍又一遍地“寻找”下一个元素，但它非常动态，所以它可能适合你。

警告：如果您的初始响应对象包含事件标题不在 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>