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

Question

[holllop]

Была идея сделать функцию которая принимает три массива которые я забираю из 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. Но вместо этого я получил бесконечную загрузку страницы

Comments

[iljaGolubev]

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)}
}

Answer 1

[holllop]

Причина, по которой у меня возникала бесконечная загрузка, заключается в том, что когда я изменял массив 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 за подсказку по оптимизации

Comments

[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(', ') })

Answer 2

[iljaGolubev]

Патамушта.

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)
}