iljaGolubev

Debounce

Обработка массива с использованием данных из текстового поля не имеет смысла пока значение поля изменяется.
Нужно запускать обработчик после завершения ввода. На практике, с небольшой задержкой которую вы можете подобрать индивидуально. Гуглится елементарно.

пример для илюстрации

const debounce = (callback, wait) => {
  let timeoutId = null;
  return (...args) => {
    window.clearTimeout(timeoutId); // повторый вызов отменит предыдущий
    timeoutId = window.setTimeout(() => {
      callback(...args);
    }, wait); // и запустит новый
  };
}

const runDebouncedBigArrayOnInputEnds = debounce(
    (event) => {
      // запускает обработку большого массива в цикле
    }, 
   250 // сколько ждать завершения ввода
);

document.getElementById('#myTxtField').addEventListener('input', runDebouncedBigArrayOnInputEnds );

https://laravel.com/docs/11.x/csrf#csrf-x-csrf-token
"X-CSRFToken" неправильный заголовок.
И вообще, убедитесь, что let csrftoken = getCookie('XSRF-TOKEN'); получает значение.

Если document.origin у всех приложений одинаковый используйте Broadcast_Channel_API

А вообще, ваша форма "авторизации" не должна ничего делать кроме как отправить форму методом post на url выбранного приложения в нужный роут - там разберутся.

<form method="post" action="App1.xyz://authorize"> ...

перечитайте документацию. https://api.jquery.com/load/
вы возможно думали, что это про события. а нет.

При клике на кнопку не могу получить текст с инпута в "count"

Вы не из того места пытаетесь получить значение.
Значение тут: `$(this).parents('tr').find('.number-text').val() `
А у вас: `table.row(значение)` - скобка не на месте.

// вместо $('#users_table tbody').on('click' ...
 table.on("click", "button", function (e) {
    let data = table.row(e.target.closest("tr")).data();
    console.log(data);
    let cart_count = $(e.target.closest("tr")).find("input.number-text").val();
    console.log(cart_count);
  });

Но лучше работать с api datatables. Примерно так:

var table = null;
$(document).ready(function () {
  table = $("#users_table").DataTable({
    data: [[29, "Andrew", "Ruby", "9300000", "1", "btn"]],
    columns: [
      { title: "id" },
      { title: "name" },
      { title: "code" },
      { title: "description" },
      // вместо createdRow использовать renderer и изменять table.data сразу при изменении значения поля
      { title: "count", render: function (data, type, row, meta) {
        return "<input type=\"text\" value="+row[4]+" onchange=\" table.cell("+meta["row"]+", 4).data(this.value)\">"; 
     }},
      { title: "action" }
    ],
    columnDefs: [
      {
        data: null,
        defaultContent: "<button>Click!</button>",
        targets: -1
      }
    ],
    
  });

  table.on("click", "button", function (e) {
    // тогда нужное вам значение уже есть тут
    let data = table.row(e.target.closest("tr")).data();
    console.log(data);
  });
});

почините бардак в коде чтобы не было "Uncaught ReferenceError: eeer is not defined" - и всё заработает.

const eeer = ()=>{
    // if (location333 === 'arzamas' ) { ...
}
window.addEventListener('DOMContentLoaded', eeer);

function createTable(i, data){
 const div = document.createElement("div");
 div.classList.add('data' + [i]);
 document.body.append(div); // тут!
 div.innerHTML =  i + "  <pre>"  + JSON.stringify(data,null,'  ' ) + "</pre>"; 
}

С таблицей будет сложнее пока вы получаете данные в разных реквестах - порядок XMLHttpRequest.DONE может не соответствовать i++;
но для начала - вот (не проверял)

const t= document.createElement('table')
function addRow(table, index, json){
    const row=document.createElement('tr')
    const cell=document.createElement('td')
    cell.innerHTML= i + "  <pre>"  + JSON.stringify(json,null,'  ' ) + "</pre>"
    row.appendChild(cell)
    table.appendChild(row)
}

// ваши реквесты
for(let i=0; i<count; i++) {
...
    addRow(1,data)
...
}

Патамушта.

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

Если речь об этих datatables , то в общем-то с помощью css и атрибутов html.
Например, если в body кроме table больше ничего нет, то так:

<table id="example" width="70%" style=" white-space: pre-wrap;">
    <thead>
        <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
    </thead>
    <!-- ... -->

$('#example').DataTable( {
    autoWidth: false,
    columnDefs: [
        { targets: '_all', "width": "1%" }
    ]
} );

Если используете бутстрап - у таблицы не должно быть 'nowrap' css класса.
Используйте style="overflow-wrap: anywhere;" eсли в датасете есть слишком_длинные_значения_которые_точно_не_влезут в конечную ширину колонки .

С трудом понял, что-же вам нужно, но, надеюсь, правильно:)
Идея в том, чтобы рекурсивно перебирать все ноды спана, считать длину содержимого каждой ноды, и добавлять её в первую часть пока пока не превышен лимит количества. В начале итерации лимит - половина от всего текста спана.

function aggregator (a, c, maxChars){
    if (a[0].textContent.length > maxChars) {
        a[1].appendChild(c)
    } else if (c.children?.length > 0) {
        const agg = spanParse(c, maxChars - a[0].textContent.length);
        a[0].appendChild(agg[0])
        if (agg[1]) {
            a[1].appendChild(agg[1])
        }
    } else {
        a[0].appendChild(c)
    }
    return a;
}
function spanParse(rootSpan, maxChars) {
    const aggregated = [document.createElement('span'), document.createElement('span')]
    return [...rootSpan.childNodes].reduce((a, c) => aggregator(a, c, maxChars), aggregated)
}
function split(elem) {
    const r = spanParse(elem, elem.textContent.length / 2)
    console.log(r[0].textContent.length, r[1].textContent.length)
}

split(document.getElementByTag('span'));

С тем кодом который в вопросе работать будет если span с текстом есть на странице. Если с какой-то другой разметкой будут ошибки, то нужно докрутить логики в aggregator.

Завернуть FileReader в Promise
как-то так

const readAsDataURL = (image) => {
  const fr= new FileReader();
  return new Promise((resolve, reject) => {
    fr.onerror = () => {  fr.abort();  reject(new Error( 'err msg' ));  };

    fr.onload = () => { resolve(fr.result); };
    fr.readAsDataURL(image)
  });
};


[...selectedImages].map( async (image, index) => {
   const data =  await readAsDataURL(image)
   return (<img src={data} alt="" key={`previewImage:${index}`} />
})

Если не нужно чтобы выводило B, добавьте return.

if (counter != 0){
                Operation(counter)
                return
            }

// range.setValues(arr);
arr.forEach(
    (val,idx) => {
        if (val!=='') range.getCell(1, idx+1).setValue(val)
    }
);