Бесконечная загрузка страницы, как исправить?

Была идея сделать функцию которая принимает три массива которые я забираю из API.

window.addEventListener('DOMContentLoaded', async () => {   try {     const orderDataPromise = getOrderData();     const workDataPromise = getWorkData();     const workObjectDataPromise = getWorkObjectData();      const orderData = await orderDataPromise;     const workData = await workDataPromise;     const workObjectData = await workObjectDataPromise;      processing(orderData, workData, workObjectData);   } catch (error) {     console.log(error);   } });  function getOrderData() {   return fetch('http://:3000/orderIdget')     .then(response => response.json())     .then(data => console.log(data))     .catch(error => console.log(error)); }  function getWorkData() {   return fetch('http://:3000/information')     .then(response => response.json())     .then(data => console.log(data))     .catch(error => console.log(error)); }  function getWorkObjectData() {   return fetch('http://:3000/Work_object')     .then(response => response.json())     .then(data => console.log(data))     .catch(error => console.log(error)); }  function processing (orderData, workData, workObjectData){ console.log(orderData, workData, workObjectData); }

и тут всё работает и всё хорошо мне нужно эти 3 массива объединить в один
по этому пишу

function processing (orderData, workData, workObjectData){   console.log("доступны и в функции", orderData, workData, workObjectData);   for (let i = 0; i < orderData.length; i++) {     const orderId = orderData[i].order_id;     const matchingWorkItems = workData.filter(workItem => workItem.id_order === orderId);      // Добавляем name_object в текущий элемент orderData, если есть соответствующие элементы в workData     if (matchingWorkItems.length > 0) {       matchingWorkItems.forEach(workItem => {         orderData.splice(i + 1, 0, { ...orderData[i], name_object: workItem.name_object });       });     }   } }

по идеи эта функция должна была делать следующие, так как в массиве orderData и workData, есть общий item, а если быть точнее, то item.order_id. и мне нужно следующее если item.order_id из массива orderData и item.order_id из массива workData равны между собой, то тогда в массив orderData дозапишется item.name_object из массива workData. Но вместо этого я получил бесконечную загрузку страницы

Дополнительно:

window.addEventListener('DOMContentLoaded', async () => {

перепишите.

window.addEventListener('DOMContentLoaded', ()=>{     Promise.all([getOrderData(), getWorkData(), getWorkObjectData()])         .then(fetched=>processing(fetched[0], fetched[1], fetched[2])         .catch((reason)=>{console.error(reason)} }

Причина, по которой у меня возникала бесконечная загрузка, заключается в том, что когда я изменял массив orderData внутри цикла for. Это приводит к изменению длины массива, а следовательно, к изменению условия цикла for, которое проверяет i < orderData.length. В результате, цикл может выполняться бесконечное количество раз, вызывая бесконечную загрузку.
Проблему решил так

function processing (orderData, workData, workObjectData){   console.log("доступны и в функции", orderData, workData, workObjectData);   const updatedOrderData = [];   for (let i = 0; i < orderData.length; i++) {     const orderId = orderData[i].order_id;     const matchingWorkItems = workData.filter(workItem => workItem.id_order === orderId);     if (matchingWorkItems.length > 0) {       matchingWorkItems.forEach(workItem => {         updatedOrderData.push({ ...orderData[i], name_object: workItem.name_object });       });     }     updatedOrderData.push(orderData[i]);   }   console.log("updatedOrderData", updatedOrderData); }

так же хочу поблагодарить iljaGolubev за подсказку по оптимизации

• не вдаваясь, что вы получаете с бэка и почему не готовите данные там.
  вы создаёте новый массив updatedOrderData .. ну ОК раз надо.
  но вот дублировать в нём orderData[i] - точно не ок.

  вот вам ещё информация для размышления.

  function processing(orderData, workData) { console.log("доступны и в функции", orderData, workData); return workData.reduce( (acc, work, workItemIdx) => { if (acc['order-' + work.id_order] === undefined) { const orderDataIdx = orderData.findIndex(o => o.id_order == work.id_order); if (orderDataIdx < 0) { return acc; } acc['order-' + work.id_order] = { orderDataIdx, workItemIndexes: [] } } acc['order-' + work.id_order].workItemIndexes.push(workItemIdx) return acc }, {} /* acc */ ) } const o = [{ id_order: 111, date: "X" }, { id_order: 333, date: "Y" }]; const w = [{ id_order: 111, name_object: "X-name1" }, { id_order: 111, name_object: "X-name2" }, { id_order: 333, name_object: "Y-name1" }] const indexed = processing(o, w); console.log('Indexed', indexed) console.log("Order 111", { date: o[indexed['order-111'].orderDataIdx].date, item_names: indexed['order-111'].workItemIndexes.map(i => w[i].name_object).join(', ') }) console.log("Order 333", { date: o[indexed['order-333'].orderDataIdx].date, item_names: indexed['order-333'].workItemIndexes.map(i => w[i].name_object).join(', ') })

  function processing(orderData, workData) { console.log("доступны и в функции", orderData, workData); return workData.reduce( (acc, work, workItemIdx) =&gt; { if (acc['order-' + work.id_order] === undefined) { const orderDataIdx = orderData.findIndex(o =&gt; o.id_order == work.id_order); if (orderDataIdx &lt; 0) { return acc; } acc['order-' + work.id_order] = { orderDataIdx, workItemIndexes: [] } } acc['order-' + work.id_order].workItemIndexes.push(workItemIdx) return acc }, {} /* acc */ ) } const o = [{ id_order: 111, date: "X" }, { id_order: 333, date: "Y" }]; const w = [{ id_order: 111, name_object: "X-name1" }, { id_order: 111, name_object: "X-name2" }, { id_order: 333, name_object: "Y-name1" }] const indexed = processing(o, w); console.log('Indexed', indexed) console.log("Order 111", { date: o[indexed['order-111'].orderDataIdx].date, item_names: indexed['order-111'].workItemIndexes.map(i =&gt; w[i].name_object).join(', ') }) console.log("Order 333", { date: o[indexed['order-333'].orderDataIdx].date, item_names: indexed['order-333'].workItemIndexes.map(i =&gt; w[i].name_object).join(', ') })

Ответы:

Патамушта.

o=[1,2,3]; console.log('o.len : ',o.length) // можно убрать && i<10 for(let i=0;i<o.length && i<10; i++){     o.splice(i+1,0,'added_'+i);     console.log('NEW o.len : ',o.length) }